尝试 lint Angular 模板时出现 ESLint 错误

Posted

技术标签:

【中文标题】尝试 lint Angular 模板时出现 ESLint 错误【英文标题】:ESLint error when trying to lint Angular templates 【发布时间】:2020-12-01 07:46:37 【问题描述】:

我有一个使用 eslint 和 prettier 设置的 Angular 10 应用程序,到目前为止,它可以很好地用于 linting Typescript 文件。我现在也在尝试 lint 我的组件模板文件following this doc。

但是当我使用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 相关的内容,这不是应该用于模板的解析器。从覆盖部分删除 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"],
,

【问题讨论】:

这能回答你的问题吗? "parserOptions.project" has been set for @typescript-eslint/parser。您使用的解析器不同但问题相同(关于 TypeScript 解析器) 对于 i18n 本地化模板规则看here on SO 【参考方案1】:

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


  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-eslint/template-parser 也没有为类型感知 linting 提供信息所需的基础架构。

这就是 lint 规则在您的文件上失败的原因。

您需要对使用 @angular-eslint/template-parser 解析的文件禁用所有类型感知 lint 规则

【讨论】:

感谢您的澄清。我用一个新问题更新了我的问题。 我对 angular-eslint 了解不多,但我想说项目的工作方式意味着您必须禁用 angular 模板文件上的所有标准 eslint lint 规则。跨度> 你是对的,我现在设法让它工作并相应地更新了我的答案。

以上是关于尝试 lint Angular 模板时出现 ESLint 错误的主要内容,如果未能解决你的问题,请参考以下文章

安装 angular2-notifications 后运行 lint 失败

尝试运行 ESLint 脚本时出现“SyntaxError: Unexpected token ”

创建新应用程序和库时出现@nrwl/nx 错误

为啥在尝试升级 Angular 时出现“没有导出成员”错误?

为啥在尝试使用 Angular 检索数据库信息时出现错误 415?

为啥在尝试将 Angular 父组件的属性绑定到子组件时出现此错误?