记一次vscode-eslint-prettier自动格式化配置

记一次vscode安装eslint自动格式化问题

1.init eslint

# 在项目中执行，根据提示完成eslint初始化
eslint --init

2.安装prettier

# 项目中需要安装prettier，vscode格式化才能生效
# 我一开始没装这个，vscode一直不能格式化，查了好久才发现是这个问题，避坑
pnpm add prettier -D

3. vscode 安装eslint插件

vscode扩展搜索 eslint

4.vscode 安装eslint-prettier 插件

插件地址 或者vscode扩展搜索 eslint-prettier

5. vscode 配置defaultFormat

6. vscode 开启 formatOnSave

如果不生效，可能是版本问题, 可查看插件详情，比对版本

eslint 提示必须引入react，17之后无需引入

add "plugin:react/jsx-runtime" to "extends"

我的配置

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'react'],
  rules: {
    indent: ['error', 2],
    'linebreak-style': ['error', 'unix'],
    quotes: ['error', 'single'],
    semi: ['error', 'always'],
  },
};