Adding Eslint to your Angular 12 project

If you already have an angular project made with the cli, it's pretty simple to add eslint. You need to add this package. Just run in your console:

ng add @angular-eslint/schematics

This will:

• create an .eslintrc.json file where you will add all your rules

• update your angular.json file by adding in your cli object, the property "defaultCollection": "@angular-eslint/schematics"

• update your package.json by adding a new script "lint": "ng lint" and install the following packages: @angular-eslint/builder, @angular-eslint/eslint-plugin, @angular-eslint/eslint-plugin-template, @angular-eslint/schematics, @angular-eslint/template-parser, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, eslint

Whenever you run ng run lint it will fix your files according to the rules you set in your .eslintrc.json.

If you're using webstorm, you need to do a couple of things:

1. Go to Preferences/Language & Frameworks/JavaScript/Code Quality Tools/ESLint and enable it.
2. Select Manual Eslint Configuration to take it from the nearest package.json

If you want to map your code formatter keys(CMD + OPTION + L) to eslint, go to Preferences/Keymap and search for eslint.

As a bonus, here is a current eslint rules config that I'm using:

"rules": {
    "@angular-eslint/directive-selector": [
      "error",
      {
        "type": "attribute",
        "prefix": "app",
        "style": "camelCase"
      }
    ],
    "@angular-eslint/component-selector": [
      "error",
      {
        "type": "element",
        "prefix": "app",
        "style": "kebab-case"
      }
    ],
    "curly": "error",
    "eqeqeq": "error",
    "no-dupe-keys": "error",
    "no-duplicate-case": "error",
    "block-spacing": "error",
    "brace-style": "error",
    "comma-spacing": "error",
    "comma-style": "error",
    "computed-property-spacing": "error",
    "indent": [
      "error",
      2
    ],
    "key-spacing": [
      "error",
      {
        "align": "colon"
      }
    ],
    "keyword-spacing": "error",
    "no-multiple-empty-lines": "error",
    "no-trailing-spaces": "error",
    "object-curly-spacing": "error",
    "quotes": [
      "error",
      "single"
    ],
    "space-infix-ops": "error"
  }