eslint register custom prefix for angular library: the selector should start with one of these prefixes,

user_6569899 0
Viewed 3531

I have an Angular 12 solution that has two projects: one that is a library and one that is an app. I converted these from using tslint to eslint. I used the following commands:

ng add @angular-eslint/schematics

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

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

My library uses a different prefix from the app. When I run ng lint I get the following error:

The selector should start with one of these prefixes: "app" (https://angular.io/guide/styleguide#style-02-07) @angular-eslint/component-selector

I have a .eslintrc.json file in the root directory and in the top project directories for the app and lib. I tried changing the entry for component-selector prefix to lib in the .eslintrc.json file from my library project folder:

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

This doesn't fix the problem. How do I regester my custom prefix for my library to make this error go away?

angular eslint
1 Answers

There is also a @angular-eslint/directive-selector entry that applies to directives. So, if you're receiving that linting error on a directive instead of a component, then try updating the prefix on the @angular-eslint/directive-selector, as well.

In addition, I assume that your selector in your component starts with lib-. If not, then you'll need to replace lib with whichever prefix you use.

For example, let's assume that your component and directive selectors look like the following - notice the prefix of lib-:

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

And let's also assume that your directive selectors look like the following - notice the prefix of lib:

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

Using the above assumptions, here is a full example of the .eslintrc.json that was generated for me after I ran that command:

{
  "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": {}
    }
  ]
}
user_2439920
Related