Angular 9 + eslint: error Definition for rule '@angular-eslint/...' was not found

Question

Recently, I migrated from tslint to eslint for my Angular 9 project. Currently, these are the versions in my package.json:

"@typescript-eslint/eslint-plugin": "^3.1.0",
"@typescript-eslint/eslint-plugin-tslint": "^3.1.0",
"@typescript-eslint/parser": "^3.1.0",
"eslint": "^7.2.0"

After running eslint, I get a ton of errors (1000+, to be exact), and most of them are either:

   1:1  error  Definition for rule '@angular-eslint/component-class-suffix' was not found        @angular-eslint/component-class-suffix
   1:1  error  Definition for rule '@angular-eslint/component-selector' was not found            @angular-eslint/component-selector
   1:1  error  Definition for rule '@angular-eslint/directive-class-suffix' was not found        @angular-eslint/directive-class-suffix
   1:1  error  Definition for rule '@angular-eslint/directive-selector' was not found            @angular-eslint/directive-selector

or:

   1:1  error  Definition for rule '@typescript-eslint/class-name-casing' was not found          @typescript-eslint/class-name-casing
   1:1  error  Definition for rule '@typescript-eslint/tslint/config' was not found              @typescript-eslint/tslint/config

I tried researching a fix for this issue, but no luck so far and I can't seem to find out where should I define these missing rules?

Answer 1

add "@angular-eslint" to the "plugins" in the eslintrc.js / .eslintrc file

{
    "plugins": [
          .....
        "@angular-eslint"
    ]
}

Answer 2

Although eslint is not yet supported by angular (see https://github.com/mgechev/codelyzer/issues/763), there are things that can be done to completely switch from tslint to eslint.

I do not recommend that you try to run eslint directly inside an angular project. You still need to use ng cli to lint the project. It is also recommended to remove tslint from your project to avoid confusing the tools.

1. add eslint, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, prettier, @angular-eslint (follow instructions at https://github.com/angular-eslint/angular-eslint), and any other eslint plugin you want to use

2. create a .eslintrc.js at the root of your workspace. I recommend .js and not .json in order to be able to do like angular does with tslint and define app specific .eslintrc.js in the app director

3. For every project your have under anguler.json, update the "lint" configration as following:

"lint": { "builder": "@angular-eslint/builder:lint", "options": { "eslintConfig": "apps/<>/.eslintrc.js",

4. Remove tslint and its files.

.eslintrc.js at root level

/**
 * We are using the .JS version of an ESLint config file here so that we can
 * add lots of comments to better explain and document the setup.
 */
module.exports = {
  /**
   * See packages/eslint-plugin/src/configs/README.md
   * for what this recommended config contains.
   */
  ignorePatterns: ['**/*.js'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'plugin:@angular-eslint/recommended',
  ],
  plugins: ['@typescript-eslint'],
  rules: {
    // ORIGINAL tslint.json -> "directive-selector": [true, "attribute", "app", "camelCase"],
    '@angular-eslint/directive-selector': [
      'error',
      { type: 'attribute', prefix: 'hc', style: 'camelCase' },
    ],

    // ORIGINAL tslint.json -> "component-selector": [true, "element", "app", "kebab-case"],
    '@angular-eslint/component-selector': [
      'error',
      { type: 'element', prefix: 'hc', style: 'kebab-case' },
    ],
  },
  overrides: [
    /**
     * This extra piece of configuration is only necessary if you make use of inline
     * templates within Component metadata, e.g.:
     *
     * @Component({
     *  template: `<h1>Hello, World!</h1>`
     * })
     * ...
     *
     * It is not necessary if you only use .html files for templates.
     */
    {
      files: ['*.component.ts'],
      parser: '@typescript-eslint/parser',
      parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module',
      },
      plugins: ['@angular-eslint/template'],
      processor: '@angular-eslint/template/extract-inline-html',
    },
  ],
};

.eslintrc.js for an app

const _ = require('lodash');
const workspaceConfig = require('../../.eslintrc');

/**
 * We are using the .JS version of an ESLint config file here so that we can
 * add lots of comments to better explain and document the setup.
 */
module.exports = _.merge({}, workspaceConfig, {
  rules: {
    // ORIGINAL tslint.json -> "directive-selector": [true, "attribute", "app", "camelCase"],
    '@angular-eslint/directive-selector': [
      'error',
      { type: 'attribute', prefix: 'shop', style: 'camelCase' },
    ],

    // ORIGINAL tslint.json -> "component-selector": [true, "element", "app", "kebab-case"],
    '@angular-eslint/component-selector': [
      'error',
      { type: 'element', prefix: 'shop', style: 'kebab-case' },
    ],
  },
});

Linting

As mentioned above, just use ng lint :-). Do not run eslint directly.

I have a fully working repo using angular 9 and eslint, you can check it at https://github.com/abdes/happy-coding

Answer 3

Have you installed these missing modules in node_modules