Angular ESLint

Monorepo for all the tooling which enables ESLint to lint Angular projects

This project is made possible thanks to the continued hard work going into https://github.com/typescript-eslint/typescript-eslint, and brilliant work on the original TSLint rule implementations in https://github.com/mgechev/codelyzer.

Feel free to begin playing with the tooling in your own projects and submit PRs with missing rules and bug fixes.

We would also be very grateful for documentation PRs!

Packages included in this project

Please follow the links below for the packages you care about.

• @angular-eslint/builder - An Angular CLI Builder which is used to execute ESLint on your Angular projects using standard commands such as ng lint

• @angular-eslint/eslint-plugin - An ESLint-specific plugin that contains rules which are specific to Angular projects. It can be combined with any other ESLint plugins in the normal way.

• @angular-eslint/template-parser - An ESLint-specific parser which leverages the @angular/compiler to allow for custom ESLint rules to be written which assert things about your Angular templates.

• @angular-eslint/eslint-plugin-template - An ESLint-specific plugin which, when used in conjunction with @angular-eslint/template-parser, allows for Angular template-specific linting rules to run.

Linting templates with Angular ESLint

You can change the parser in the main section of your eslint config file to the template parser in this project. The rules in /template will then be available to use in your main config section. If any rules in OTHER packages then complain about not having access to the parser they need, you can add an 'overrides' section to your config specifically for the template rules instead, e.g.:

// ... more config
"overrides": [
    {
      "files": ["*.component.html"],
      "parser": "@angular-eslint/template-parser",
      "plugins": ["@angular-eslint/template"],
      "rules": {
        "@angular-eslint/template/banana-in-a-box": "error",
        "@angular-eslint/template/cyclomatic-complexity": "error",
        "@angular-eslint/template/no-call-expression": "error",
        "@angular-eslint/template/no-negated-async": "error",
        "@angular-eslint/template/i18n": [
          "error",
          {
            "checkId": false,
            "checkText": true,
            "checkAttributes": true,
            "ignoreAttributes": [
              "field",
              "identifier"
            ]
          }
        ]
      }
    }
  ]
// ... more config

Linting inline-templates with the VSCode extension for ESLint

If you use vscode-eslint, and inline-templates on your Angular Components, you will need to make sure you add the following to your VSCode settings:

// ... more config

"eslint.options": {
  "extensions": [".ts", ".html"]
}

// ... more config

Please see the following issue for more information: microsoft/vscode-eslint#922

Migrating from Codelyzer and TSLint

We have some work in progress tooling to make this as automated as possible, but the reality is it will always be somewhat project-specific as to how much work will be involved in the migration.

The first step is to run the schematic to add @angular-eslint to your project:

ng add @angular-eslint/schematics

This will handle installing the latest version of all the relevant packages for you and adding them to the devDependencies of your package.json.

Soon this ng-add schematic will also handle applying some of the following steps for you automatically.

The migration involves a few different aspects:

1. Replacing the builder the Angular CLI will use when you run ng lint

2. Replacing your tslint.json files with .eslintrc.json files

3. Populating the .eslintrc.json files appropriately to match the previous setup you had in the Codelyzer + TSLint world

The best reference configurations for performing your own migration are located within the Angular CLI integration test within this monorepo. Check out the relevant configuration files:

• packages/integration-tests/fixtures/angular-cli-workspace/.eslintrc.js
• packages/integration-tests/fixtures/angular-cli-workspace/angular.json

If you are looking for general help in migrating from TSLint to ESLint, you can check out this project: https://github.com/typescript-eslint/tslint-to-eslint-config

Rules List

✅ = done
🚧 = work in progress

Functionality

Codelyzer rule	Status
contextual-decorator
contextual-lifecycle	✅
no-attribute-decorator	✅
no-lifecycle-call	✅
no-output-native	✅
no-pipe-impure	✅
prefer-on-push-component-change-detection	✅
template-accessibility-alt-text
template-accessibility-elements-content
template-accessibility-label-for
template-accessibility-tabindex-no-positive
template-accessibility-table-scope
template-accessibility-valid-aria
template-banana-in-box	✅
template-click-events-have-key-events
template-mouse-events-have-key-events
template-no-any
template-no-autofocus
template-no-distracting-elements
template-no-negated-async	✅
use-injectable-provided-in	✅
use-lifecycle-interface	✅

Maintainability

Codelyzer rule	Status
component-max-inline-declarations	✅
no-conflicting-lifecycle	✅
no-forward-ref	✅
no-input-prefix	✅
no-input-rename	✅
no-output-on-prefix	✅
no-output-rename	✅
no-unused-css
prefer-output-readonly	✅
relative-url-prefix	✅
template-conditional-complexity
template-cyclomatic-complexity	✅
template-i18n	✅
template-no-call-expression	✅
template-use-track-by-function
use-component-selector	✅
use-component-view-encapsulation	✅
use-pipe-decorator	✅
use-pipe-transform-interface	✅

Style

Codelyzer rule	Status
angular-whitespace
component-class-suffix	✅
component-selector	✅
directive-class-suffix	✅
directive-selector	✅
import-destructuring-spacing
no-host-metadata-property	✅
no-inputs-metadata-property	✅
no-outputs-metadata-property	✅
no-queries-metadata-property	✅
pipe-prefix
prefer-inline-decorator