VS Code中ESlint失效原因咨询：保存无提示但npm run lint可检测错误

问题描述 #

在VS Code中，ESLint无法关联代码，保存文件时不会给出错误提示，但执行npm run lint命令却能正常显示错误。

设置截图 #

项目依赖版本 #

"@typescript-eslint/eslint-plugin": "^5.12.1",
"@typescript-eslint/parser": "^5.12.1",
"eslint": "^8.10.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.29.2",
"eslint-plugin-react-hooks": "^4.3.0",

解决方案 #

• 重启ESLint服务并检查插件状态
  打开VS Code命令面板（Ctrl+Shift+P），执行ESLint: Restart ESLint Server；同时确认扩展面板中的ESLint插件处于启用状态。

• 修复ESLint配置文件

  1. 安装适配TypeScript的Airbnb配置依赖：

     npm install eslint-config-airbnb-typescript --save-dev
     

  2. 在.eslintrc.js中更新配置，确保TypeScript规则生效：

     module.exports = {
       extends: [
         'airbnb',
         'airbnb-typescript',
         'airbnb/hooks',
         'plugin:@typescript-eslint/recommended'
       ],
       parser: '@typescript-eslint/parser',
       parserOptions: {
         project: './tsconfig.json' // 指向项目根目录的tsconfig文件
       },
       plugins: ['@typescript-eslint']
     };
     

  3. 执行npx eslint --print-config ./src/index.ts验证配置是否无语法错误。

• 调整VS Code工作区设置
  在项目的.vscode/settings.json中添加以下配置，确保ESLint覆盖目标文件类型：

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

• 检查依赖兼容性
  确认@typescript-eslint系列包与eslint@8.10.0的版本适配性，参考@typescript-eslint官方文档的版本对照表。若存在兼容问题，升级@typescript-eslint/eslint-plugin和@typescript-eslint/parser到适配ESLint 8.x的稳定版本。

• 确认文件类型关联
  查看VS Code右下角状态栏的文件类型标识，确保.ts/.tsx文件被识别为TypeScript或TypeScriptReact，若标识错误，点击选择正确类型。

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