VS Code中TS项目ESLint提示import/extensions等规则未找到如何解决

根因说明 #

报错触发的核心原因是eslint-plugin-import未被ESLint正确加载，同时缺少TypeScript路径解析的适配依赖：Airbnb Typescript校验规则依赖该插件的import/extensions、import/no-extraneous-dependencies等规则，你当前的配置未显式声明加载该插件，也没有配置对应的TypeScript解析规则，就会触发规则不存在的报错。

操作步骤 #

1. 替换你的.eslintrc.json为以下完整配置：

{
  "env": {
      "es2021": true,
      "node": true
  },
  "extends": [
      "airbnb-typescript/base",
      "plugin:@typescript-eslint/recommended",
      "plugin:import/typescript"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
      "ecmaVersion": 12,
      "sourceType": "module",
      "project": "./tsconfig.json"
  },
  "plugins": [
      "@typescript-eslint",
      "import"
  ],
  "rules": {
      "@typescript-eslint/no-use-before-define": "off",
      "import/extensions": [
        "error",
        "ignorePackages",
        {
          "ts": "never"
        }
      ],
      "import/no-extraneous-dependencies": ["error", {"devDependencies": true}]
  },
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts"]
    },
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true
      },
      "node": {
        "extensions": [".ts"]
      }
    }
  }
}

2. 安装缺失的TypeScript路径解析适配依赖：
   npm i -D eslint-import-resolver-typescript

3. 清理缓存重启生效：

• 删除本地node_modules文件夹、package-lock.json文件
• 执行npm install重新安装所有依赖
• 打开VS Code命令面板（Windows/Linux按Ctrl+Shift+P，Mac按Cmd+Shift+P），依次执行「ESLint: Restart ESLint Server」、「Developer: Reload Window」

操作完成后即可同时保留Airbnb风格校验，消除规则不存在、扩展名报错、路径解析报错的问题。

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