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

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

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

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

Moving from tslint to eslint

Refer to the following link for moving from tslint to eslint https://github.com/angular-eslint/angular-eslint#quick-start-with-angular-before-v12

Project configuration

If you have already setup your project to use eslint, instead of tslint

Within your .eslintrc.json / .eslintrc.js file, you should have the following setup in your extends section

"extends": [
    "plugin:@angular-eslint/recommended",
    "plugin:@angular-eslint/template/process-inline-templates",
    "plugin:prettier/recommended"
  ],

within your rules section, you can mention which rules you want to show an error/warning etc.

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

You can refer to the following link to see which rules have been ported over: https://github.com/typescript-eslint/tslint-to-eslint-config/issues/494