Upgrading to ESLint with error at imports for definition of rules

Question

I am working on a local project and I have upgrade Angular v9 to v10 together with TSLint to ESLint. I referred to this github repo for migraiton https://github.com/angular-eslint/angular-eslint

So my project uses libs which means it does have more than one project. I configured the eslintrc.json but I am occuring on errors. The first of the errors which is comming it is

Definition for rule '@angular-eslint/component-selector' was not found  @angular-eslint/component-selector

Even though the @angular-eslint/component-selector is defined on every each first line of *.ts files it throws that error.

My Eslint of main lib it looks like this eslintrc.json

{
  "root": true,
  "ignorePatterns": [
    "!**/*"
  ],

  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "**/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
      ],

      "rules": {
        "@angular-eslint/component-selector": [
          "error",
          {
            "prefix": "lib",
            "style": "kebab-case"
          }
        ],
        "@angular-eslint/directive-selector": [
          "error",
          {
            "prefix": "lib",
            "style": "camelCase"
          }
        ],
        "max-len": ["error", { "code": 140 }],
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "@typescript-eslint/ban-ts-comment": "off",
        "@typescript-eslint/naming-convention": [
          "error",
          {
            "selector": "variable",
            "format": ["camelCase", "UPPER_CASE", "PascalCase"]
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "rules": {
        "arrow-body-style":"error",
        "@typescript-eslint/prefer-function-type":"error"
       }
    }
  ]
}

This is my eslintrc.json of one of the libs

{
  "extends": "../../.eslintrc.json",
  "ignorePatterns": [
    "!**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "apps/login/tsconfig.app.json",
          "apps/login/tsconfig.spec.json",
          "apps/login/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "rules": {}
    }
  ]
}

Answer 1

For everyone so may know, I have found the error. It is because at the plugins it needed to be added the angular-eslint plugin. I have added this one

 "plugin:@angular-eslint/recommended",

And it did the job.