angular - eslint 为 Angular 库 : the selector should start with one of these prefixes, 注册自定义前缀

Question

我有一个 Angular 12 解决方案，它有两个项目:一个是库，一个是应用程序。我将这些从使用 tslint 转换为 eslint。我使用了以下命令:

ng 添加@angular-eslint/schematics

ng g @angular-eslint/schematics:convert-tslint-to-eslint 我的应用程序

ng g @angular-eslint/schematics:convert-tslint-to-eslint my-library

我的图书馆使用与应用程序不同的前缀。当我运行 ng lint 时，出现以下错误:

选择器应以以下前缀之一开头:“app”(https://angular.io/guide/styleguide#style-02-07) @angular-eslint/component-selector

我在应用程序和库的根目录和顶级项目目录中有一个 .eslintrc.json 文件。我尝试在我的库项目文件夹中的 .eslintrc.json 文件中将组件选择器前缀的条目更改为 lib:

   "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "lib",
            "style": "kebab-case"
          }
        ]
      }

这并不能解决问题。如何为我的库注册我的自定义前缀以消除此错误？

Answer 1

还有一个适用于指令的 @angular-eslint/directive-selector 条目。因此，如果您在指令而不是组件上收到 linting 错误，那么也请尝试更新 @angular-eslint/directive-selector 上的 prefix .

此外，我假设您的组件中的选择器以 lib- 开头。如果不是，那么您需要将 lib 替换为您使用的任何前缀。

例如，假设您的组件和指令选择器如下所示 - 注意 lib- 的前缀:

@Component({
  selector: 'lib-search',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

我们还假设您的指令选择器如下所示 - 注意 lib 的前缀:

@Directive({
  selector: '[libFormatSomething]',
  providers: [MyFormatterService]
})

使用上述假设，这是在我运行该命令后为我生成的 .eslintrc.json 的完整示例:

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json",
          "e2e/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/component-selector": [
          "error",
          {
            "prefix": "lib",
            "style": "kebab-case",
            "type": "element"
          }
        ],
        "@angular-eslint/directive-selector": [
          "error",
          {
            "prefix": "lib",
            "style": "camelCase",
            "type": "attribute"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {}
    }
  ]
}