升级到 ESLint 时导入错误以定义规则答案

【问题标题】：Upgrading to ESLint with error at imports for definition of rules升级到 ESLint 时导入错误以定义规则
【发布时间】：2022-01-03 17:50:52
【问题描述】：

我正在处理一个本地项目，我已经将 Angular v9 升级到 v10 以及将 TSLint 升级到 ESLint。我参考了这个 github repo for migraiton https://github.com/angular-eslint/angular-eslint

所以我的项目使用库，这意味着它确实有多个项目。我配置了 eslintrc.json，但出现错误。即将出现的第一个错误是

Definition for rule '@angular-eslint/component-selector' was not found  @angular-eslint/component-selector

即使 @angular-eslint/component-selector 是在 *.ts 文件的每一行中定义的，它也会引发该错误。

我的 Eslint 的 main lib 它看起来像这个 eslintrc.json

{
  "root": true,
  "ignorePatterns": [
    "!**/*"
  ],

  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "**/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
      ],

      "rules": {
        "@angular-eslint/component-selector": [
          "error",
          {
            "prefix": "lib",
            "style": "kebab-case"
          }
        ],
        "@angular-eslint/directive-selector": [
          "error",
          {
            "prefix": "lib",
            "style": "camelCase"
          }
        ],
        "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"
      ],
      "rules": {
        "arrow-body-style":"error",
        "@typescript-eslint/prefer-function-type":"error"
       }
    }
  ]
}

这是我的 eslintrc.json 库之一

{
  "extends": "../../.eslintrc.json",
  "ignorePatterns": [
    "!**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "apps/login/tsconfig.app.json",
          "apps/login/tsconfig.spec.json",
          "apps/login/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "rules": {}
    }
  ]
}

【问题讨论】：

标签： angular typescript eslint tslint

【解决方案1】：

大家可能都知道，我发现了错误。这是因为在插件中需要添加 angular-eslint 插件。我已经添加了这个

 "plugin:@angular-eslint/recommended",

它完成了这项工作。

【讨论】：