升級到 ESLint 時導入錯誤以定義規則

Question

我正在做一個本地項目，我已經將 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

即使在 *.ts 文件的每個第一行都定義了@angular-eslint/component-selector ，它也會引發該錯誤。

我的主庫的 Eslint 它看起來像這樣 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": {}
    }
  ]
}

Answer 1

對於每個可能知道的人，我發現了錯誤。 這是因為在插件中需要添加 angular-eslint 插件。 我添加了這個

 "plugin:@angular-eslint/recommended",

它完成了這項工作。