嘗試對 Angular 模板進行 lint 時出現 ESLint 錯誤

Question

我有一個使用 eslint 和 prettier 設置的 Angular 10 應用程序，到目前為止它可以很好地處理 Typescript 文件。 我現在正在嘗試按照這個文檔對我的組件模板文件進行 lint。

但是當我用eslint. --ext.js,.ts,.component.html --fix eslint. --ext.js,.ts,.component.html --fix我不斷得到

Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

我的.eslintrc.js看起來像這樣（注意overrides部分的第二個塊）：

module.exports = {
  extends: [
    "plugin:@angular-eslint/recommended",
    // For spec files
    "plugin:jasmine/recommended",
    // AirBnB Styleguide rules
    "airbnb-typescript/base",
    // Settings for Prettier
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended",
  ],
  plugins: [
    "prettier",
    "jasmine",
  ],
  rules: {
    "import/no-unresolved": "off",
    "@angular-eslint/component-selector": [
      "error", { type: "element", prefix: "icc", style: "kebab-case" }
    ],
    "@angular-eslint/directive-selector": [
      "error", { type: "attribute", prefix: "icc", style: "camelCase" }
    ],
    "import/extensions": "off",
    "@typescript-eslint/lines-between-class-members": "off",
    "lines-between-class-members": "off",
    "class-methods-use-this": "off",
    "import/prefer-default-export": "off",
    "prettier/prettier": ["error", {
      "endOfLine":"auto"
    }],
  },
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: "./tsconfig.app.json",
    ecmaVersion: 2020,
    sourceType: "module",
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.ts', '.js'],
        moduleDirectory: ['node_modules', 'src/app'],
      }
    }
  },
  overrides: [
    {
      files: ["*.component.ts"],
      parser: "@typescript-eslint/parser",
      parserOptions: {
        project: "./tsconfig.app.json",
        ecmaVersion: 2020,
        sourceType: "module",
      },
      plugins: ["@angular-eslint/template"],
      processor: "@angular-eslint/template/extract-inline-html",
    },
    {
      files: ["*.component.html"],
      parser: "@angular-eslint/template-parser",
      parserOptions: {
        project: "./tsconfig.app.json",
        ecmaVersion: 2020,
        sourceType: "module",
      },
      plugins: ["@angular-eslint/template"],
    },
    {
      files: ["src/**/*.spec.ts", "src/**/*.d.ts"],
      parser: "@typescript-eslint/parser",
      parserOptions: {
        project: "./tsconfig.spec.json",
        ecmaVersion: 2020,
        sourceType: "module",
      },
      // Jasmine rules
      extends: ["plugin:jasmine/recommended"],
      // Plugin to run Jasmine rules
      plugins: ["jasmine"],
      env: { jasmine: true },
    }
  ],
};

如您所見，我在任何地方都指定parserOptions.project 。 我特別困惑的是，錯誤消息抱怨與@typescript-eslint/parser相關的東西，這不是應該用於模板的解析器。 從 overrides 部分中刪除parserOptions塊並沒有什么不同。

我可以為它抱怨的所有規則設置"@typescript-eslint/dot-notation": "off"但顯然這並不理想。 有人可以指出我所缺少的嗎？

更新：我已經按照 Brad 的建議關閉了所有類型感知規則。 但是，我現在得到的錯誤是：

TypeError: Cannot read property 'length' of undefined
Occurred while linting /path/to/src/app/app.component.html:1
    at getUseStrictDirectives (/path/to/node_modules/eslint/lib/rules/strict.js:27:36)

但我的app.component.html看起來像這樣：

<div class="content-root">
  <router-outlet></router-outlet>
</div>

所以再一次，我迷路了。

更新 2 ：正如布拉德在他的回答中建議的那樣，我終於設法通過為模板解析器關閉規則來使其正常工作。 我的工作overrides塊現在看起來像這樣：

{
  files: ["*.component.html"],
  parser: "@angular-eslint/template-parser",
  rules: {
    "@typescript-eslint/dot-notation": "off",
    "@typescript-eslint/no-implied-eval": "off",
    "@typescript-eslint/no-throw-literal": "off",
    "strict": "off",
    "import/first": "off",
    "lines-around-directive": "off"
  },
  plugins: ["@angular-eslint/template"],
},

Answer 1

您在此處的配置會覆蓋用於 angular 模板的解析器。 這意味着您沒有使用@typescript-eslint/parser來解析您的 angular 模板。

{
  files: ["*.component.html"],
  parser: "@angular-eslint/template-parser",
  parserOptions: {
    project: "./tsconfig.app.json",
    ecmaVersion: 2020,
    sourceType: "module",
  },
  plugins: ["@angular-eslint/template"],
},

這是有道理的，因為@typescript-eslint/parser無法理解 angular 模板。

然而@angular-eslint/template-parser也沒有提供類型感知 linting 信息所需的基礎設施。

這就是為什么 lint 規則在您的文件上失敗的原因。

您需要在使用@angular-eslint/template-parser解析的文件上禁用所有類型感知 lint 規則