如何修复ESLint/Prettier配置后编辑器不显示校验报错的问题

• 配置冲突：package.json中残留Create React App初始化生成的内置eslintConfig配置块，与根目录自定义的.eslintrc.js规则冲突，导致编辑器侧的ESLint服务无法正确加载Airbnb规则集，仅命令行直接执行lint命令时可正常读取根目录配置。
• 规则重复引入：.eslintrc.js的extends数组中重复声明规则，airbnb-typescript已内置airbnb-base相关规则，重复追加airbnb-base、airbnb-typescript/base会造成规则覆盖逻辑混乱。
• 编辑器ESLint服务未适配TS/TSX文件校验：编辑器默认未开启对TS、TSX后缀文件的ESLint实时检测，或未正确识别项目工作目录。

1. 清理冲突配置 #

打开package.json，直接删除整个内置eslintConfig字段块：

// 删掉下面这整段内容
"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
},

2. 修正ESLint配置的规则引入顺序 #

打开根目录.eslintrc.js，替换extends数组内容，移除重复规则：

module.exports = {
  extends: [
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:@typescript-eslint/recommended',
    'plugin:jest/recommended',
    'plugin:prettier/recommended'
  ],
  plugins: ['react', '@typescript-eslint', 'jest'],
  env: {
    browser: true,
    es6: true,
    jest: true,
  },
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
    project: './tsconfig.json',
  },
  rules: {
    'linebreak-style': 'off',
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
      },
    ],
  },
};

注意：plugin:prettier/recommended必须放在extends数组末尾，才能保证Prettier的格式化规则优先级最高，不会和其他规则产生冲突。

3. 配置编辑器ESLint检测规则（以VS Code为例，其他编辑器逻辑一致） #

• 确认已安装官方ESLint扩展，禁用其他同类lint冲突扩展
• 在项目根目录新建.vscode/settings.json文件，写入以下配置，开启TS/TSX文件实时校验：

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.workingDirectories": ["./"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

4. 重启ESLint服务 #

打开编辑器命令面板：

• Windows/Linux按快捷键Ctrl+Shift+P
• Mac按快捷键Cmd+Shift+P
  搜索执行ESLint: Restart ESLint Server，等待服务重启完成后，打开TS/TSX文件即可在问题面板、代码行内直接看到实时lint报错，无需手动执行npm run lint。

内容的提问来源于stack exchange，提问作者Ijuy23kl