Mihai Marinescu's Blog
Adding Eslint to your Angular 12 project

Adding Eslint to your Angular 12 project

Mihai Marinescu's photo
Mihai Marinescu
·

2 min read

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"
  }
Angulareslint