Angular升级v10迁移ESLint报@angular-eslint/component-selector规则未找到错误

• 未在ESLint配置中引入@angular-eslint相关插件与规则集：你当前根配置的TS文件extends字段仅引入了@typescript-eslint的配置，没有加载@angular-eslint的规则定义，所以ESLint无法识别@angular-eslint/component-selector这类Angular专属规则
• 可能缺失@angular-eslint相关依赖包：迁移过程未安装对应Angular版本的ESLint Angular插件
• 额外配置错误：HTML文件的overrides规则中错误添加了@typescript-eslint相关规则，该类规则仅适用于TS文件，虽不直接导致当前报错，但会引发其他异常

步骤1：安装对应版本的依赖包 #

Angular 10 需匹配@angular-eslint 1.x 版本，执行以下命令安装：

npm install --save-dev @angular-eslint/eslint-plugin@1.x @angular-eslint/template-parser@1.x @angular-eslint/eslint-plugin-template@1.x

若使用yarn包管理器，替换为对应yarn add --dev命令即可。

步骤2：修正根目录.eslintrc.json配置 #

修改后的完整配置参考：

{
  "root": true,
  "ignorePatterns": [
    "!**/*"
  ],
  "overrides": [
    {
      "files": ["*.ts"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "project": ["**/tsconfig.json"],
        "createDefaultProgram": true
      },
      "plugins": ["@angular-eslint"],
      "extends": [
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended",
        // 新增：引入Angular ESLint推荐规则集，加载所有@angular-eslint规则定义
        "plugin:@angular-eslint/recommended"
      ],
      "rules": {
        "@angular-eslint/component-selector": [
          "error",
          {
            "prefix": "lib",
            "style": "kebab-case",
            "type": "element"
          }
        ],
        "@angular-eslint/directive-selector": [
          "error",
          {
            "prefix": "lib",
            "style": "camelCase",
            "type": "attribute"
          }
        ],
        "max-len": ["error", { "code": 140 }],
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "@typescript-eslint/ban-ts-comment": "off",
        "@typescript-eslint/naming-convention": [
          "error",
          {
            "selector": "variable",
            "format": ["camelCase", "UPPER_CASE", "PascalCase"]
          }
        ]
      }
    },
    {
      "files": ["*.html"],
      "parser": "@angular-eslint/template-parser",
      "plugins": ["@angular-eslint/eslint-plugin-template"],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {
        // 移除原有的TS专属规则，仅保留HTML模板相关规则
      }
    }
  ]
}

步骤3：验证子库配置 #

子库的配置无需大改，只需确保继承根配置后，自定义的规则参数没有格式错误即可，你当前的子库配置符合要求，无需调整。

步骤4：清理缓存重启服务 #

执行以下命令清理ESLint缓存，再运行lint命令验证：

npx eslint --clear-cache

如果使用IDE的ESLint插件，手动重启插件服务，避免旧缓存导致报错依然存在。

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