# 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](https://github.com/angular-eslint/angular-eslint). 
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](https://www.jetbrains.com/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"
      }