尝试使Angular模板毛刺时出现ESLint错误 [英] ESLint error when trying to lint Angular templates

问题描述

我有一个用eslint和漂亮的设置的Angular 10应用程序，到目前为止，该应用程序可以很好地处理Typescript文件.我现在也在尝试整理组件模板文件遵循此文档.

I have an Angular 10 app set up with eslint and prettier, which worked fine so far for linting Typescript files. I'm now trying to lint my component template files as well following this doc.

但是当我使用 eslint运行它时.--ext .js，.ts，.component.html --fix 我不断得到

But when I run it with eslint . --ext .js,.ts,.component.html --fix I keep getting

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 部分中的第二个块):

My .eslintrc.js looks like this (note the second block in the overrides section):

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 相关的东西，而该东西不是模板应使用的解析器.从覆盖部分中删除 parserOptions 块不会有什么区别.

As you can see I specify parserOptions.project everywhere. I'm especially confused that the error message complains about something relating to @typescript-eslint/parser which is not the parser that should be used anyway for templates. Removing the parserOptions block from the overrides section does not make a difference.

我可以为它抱怨的所有规则设置"@ typescript-eslint/dot-notation":"off" ，但显然这并不理想.有人可以指出我想念的东西吗?

I could set "@typescript-eslint/dot-notation": "off" for all the rules it complains about but obviously that's not ideal. Can somebody point me towards what I'm missing?

更新:我已经按照Brad的建议关闭了所有类型识别规则.但是，我现在遇到的错误是:

UPDATE: I've turned off all type-aware rules as Brad suggested. However, the error I'm now getting is:

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 看起来像这样:

But my app.component.html just looks like this:

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

所以我又迷路了.

更新2 :我终于设法通过按照Brad在他的回答中建议的那样，为模板解析器关闭了一个接一个的规则来使其工作.我正在工作的 overrides 块现在看起来像这样:

UPDATE 2: I've finally managed to get it working by turning rule after rule off for the template parser as Brad suggested in his answer. My working overrides block now looks like this:

{
  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"],
},

推荐答案

此处的配置将覆盖用于角度模板的解析器.这意味着您没有使用 @ typescript-eslint/parser 来解析角度模板.

Your config here overrides the parser used for angular templates. This means that you're not using @typescript-eslint/parser to parse your angular templates.

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

这是有道理的，因为 @ typescript-eslint/parser 无法理解角度模板.

This makes sense, because @typescript-eslint/parser cannot understand angular templates.

但是， @ angular-eslint/template-parser 也不具备提供类型识别信息的信息所需的基础结构.

However @angular-eslint/template-parser also does not have the infrastructure required to provide the information for type-aware linting.

这就是为什么lint规则在您的文件上失败的原因.

This is why the lint rule fails on your file.

您需要在使用 @ angular-eslint/template-parser

这篇关于尝试使Angular模板毛刺时出现ESLint错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！