Angular – Prettier and ESLint

We all want to write and especially review code that is consistently formatted and most importantly bug-free. This is where the combination of Prettier and ESLint comes in for Angular. There are a couple of other options out there and Google should be of help.

ESLint goes through your project code and finds problems and tells you how to fix them. Better yet, it automatically fixes the code for you (be careful especially with all the legacy code copied and pasted from you know where – you might break something with the auto fixing).

Install & Configure ESLint

In this section, I will explain how to install ESLint in an Angular project and also configure it to better align with the Angular style guide and community standards.

Open the terminal and install ESLint schematics using this command:

ng add @angular-eslint/schematics

That was it. Now we have ESLint installed and also configured thanks to **ng add** command provided by the Angular-ESLint team.
Example error and how ESLint helps to fix it:

We can also run this command in terminal:
ng lint --fix
to fix all the fixable bugs in the project.

Configure Prettier to be used as an ESLint plugin

For ESLint and Prettier to play well together, we need to run Prettier as an ESLint plugin. This way we can just call ng lint --fix and ESLint will fix bugs but also format the code.

Open terminal and type:

npm install prettier-eslint eslint-config-prettier eslint-plugin-prettier — save-dev

or if you’re using yarn:

yarn add prettier-eslint eslint-config-prettier eslint-plugin-prettier -D

Now we need to edit the .eslintrc.json file to include the prettier plugin.

{
  "root": true,
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": [
        ...
        "plugin:prettier/recommended"
      ],
    },
    // NOTE: WE ARE NOT APPLYING PRETTIER IN THIS OVERRIDE, ONLY @ANGULAR-ESLINT/TEMPLATE
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    },
    // NOTE: WE ARE NOT APPLYING @ANGULAR-ESLINT/TEMPLATE IN THIS OVERRIDE, ONLY PRETTIER
    {
      "files": ["*.html"],
      "excludedFiles": ["*inline-template-*.component.html"],
      "extends": ["plugin:prettier/recommended"],
      "rules": {
        // NOTE: WE ARE OVERRIDING THE DEFAULT CONFIG TO ALWAYS SET THE PARSER TO ANGULAR (SEE BELOW)
        "prettier/prettier": ["error", { "parser": "angular" }]
      }
    }
  ]
}

VSCode and Webstorm shortucts

That was it. We’re done with the configuration part.

After we edit a file, we want to format it and then save. That’s what we will configure now for both VS Code and Webstorm.

First make sure you have ESLint and Prettier plugin installed. WebStorm has support of of the box for both.

For VS Code we need to add this lines to settings.json:

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  },
}

For Webstorm:
We need to check: Run eslint –fix on Actions On Save settings page:

Here you can find the steps summed up: Angular ESLint & Prettier Configuration