Nx/Angular 项目的 Esslint 配置 (no-host-metadata-属性)

Question

我想将规则 @angular-eslint/no-host-metadata-property 变成警告而不是错误，但我不知道如何配置它。

错误消息如下所示：

Use @HostBinding or @HostListener rather than the host metadata property (https://angular.io/styleguide#style-06-03) @angular-eslint/no-host-metadata-property

这是我在根级别的 eslintrc.json 文件中尝试过的：

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nrwl/nx"],
  "overrides": [
     {
      "files": ["*.ts"],
      "rules": {
       ....
       "@angular-eslint/no-host-metadata-property": "warn",
      }
     "plugins": ["@angular-eslint/eslint-plugin", "eslint-plugin-import", "@typescript-eslint"]
    }
}

这是一个 Angular 12 项目。我运行 nx 迁移命令将 linting 规则从 tslint 转换为 eslint。我怎样才能覆盖该规则？

Answer 1

据我所知，Nx 没有直接的方法允许这样做，因为可能有很多 angular 项目，或者在同一个存储库中使用打字稿的 React 项目。我最终将这些错误转换为警告的方法是注释掉所有 projects/libraries 中的插件扩展，并在工作区级别扩展它们。这允许它们被覆盖。

所有 angular 应用程序和库（在 libs 文件夹内）的 eslintrc.json 如下所示：

{
  "extends": ["../../../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      //"extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
      "parserOptions": {
        "project": ["libs/siem/custom-dashboard/data-access-custom-dashboard/tsconfig.*?.json"]
      },
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": ["*.html"],
      // "extends": ["plugin:@nrwl/nx/angular-template"],
      "rules": {}
    }
  ]
}

然后 eslintrc.json 在我的工作区级别是这样的：

{     .
      .
      .
      "files": ["*.ts"],
      "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
      "rules": {
        //overrides go in here
       }
     "plugins": ["@angular-eslint/eslint-plugin", "eslint-plugin-import", "@typescript-eslint"]
},

这是迄今为止我遇到的唯一解决方案。一旦我修复了所有有错误的地方，我打算删除覆盖并让一切都像最初默认设置的那样。

Answer 2

在根级别上进行更改是徒劳的，因为您的项目的 .eslintrc.json 将覆盖这些更改，因为 @nrwl/nx/angular 在覆盖部分中设置。

不幸的是，您必须在覆盖部分中为每个项目设置此项。

如果您有多个项目 and/or 需要应用多个更改，您可以将其提取到 eslint-custom-overrides.json 文件中并将其用作 extends 部分的最后一个：

{
  "extends": ["../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": [
        "plugin:@nrwl/nx/angular",
        "plugin:@angular-eslint/template/process-inline-templates"
        "../../eslintrc-custom-overrides.json"
      ],
   },
   ...
  ],
  ...
}

你的 eslintrc-custom-overrides.json 看起来像这样：

{
  "overrides": [
    {
      "files": ["*.ts"],
      "rules": {
         "@angular-eslint/no-host-metadata-property": "warn"
      }
    }
  ]
}

查看有关 NX Issue 的更多详细信息。

Nx/Angular 项目的 Esslint 配置 (no-host-metadata-属性)

Esslint configuration for Nx/Angular project (no-host-metadata-property)

eslint

angular

nrwl-nx

typescript-eslint