Configure Prettier and ESLint with Angular

What role does ESLint play?

ESLint performs static analysis on our source code to detect potential issues and, in many cases, propose solutions. Beyond just flagging problems, it has the capability to apply corrections directly to the code, which is a significant time-saver for developers.

Setting up ESLint

Here, I'll walk through the process of adding ESLint to an Angular project and fine-tuning it to follow the Angular style guide and common community practices.

Launch your terminal and execute the Angular schematics command for ESLint:

ng add @angular-eslint/schematics

That's all there is to it. The **ng add** command, maintained by the Angular-ESLint team, handles both the installation and the configuration. Here's an example of a detected error and the fix that ESLint provides:

Alternatively, you can use this command in your terminal: ng lint --fix This will automatically resolve all issues that are fixable throughout the project.

Installing and configuring Prettier

While ESLint is great for catching bugs, we still need a tool to standardize code formatting and style. Prettier addresses this need.

Prettier is an opinionated formatter that automatically beautifies your code in a consistent manner each time you save a file.

Open your terminal and run: npm install prettier --save-dev For those using yarn, the equivalent is: yarn add prettier -D

Next, create two files in the root of your project directory: .prettierrc.json and .prettierignore.

For the .prettierignore file, it's recommended to include the same entries as your .gitignore file.

You can now format the entire project with: npx prettier --write .

The .prettierrc.json file allows you to customize the default formatting options. Here are the settings that I commonly use:

{
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": true,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "trailingComma": "es5",
  "bracketSameLine": true,
  "printWidth": 80
}

That covers Prettier, but our work isn't done yet.

Occasionally, ESLint and Prettier will disagree on formatting and style rules. To resolve these conflicts, we need to make some adjustments. You can find more details here.

Integrating Prettier as an ESLint plugin

To ensure seamless cooperation, we'll run Prettier as an ESLint plugin. This allows us to use a single command, ng lint --fix, which will both fix bugs and format the code.

Open your terminal and enter:

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

Or, for yarn users:

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

We'll then modify the .eslintrc.json file to register 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" }]
      }
    }
  ]
}

Editor shortcuts in VSCode and WebStorm

That wraps up the setup.

Now, we want to format and save our files automatically. Let's set that up for both VS Code and WebStorm.

Ensure you have the ESLint and Prettier plugins installed in your editor. WebStorm includes built-in support for both.

For VS Code, add these 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, enable the Run eslint --fix option in the Actions On Save settings:

A summary of these steps is available here: Angular ESLint & Prettier Configuration

Automating the entire configuration

As you've seen, there are several packages to install and configure. Fortunately, there's a way to automate this entire process, and that solution is NX.

So, what is NX?
NX is a next-generation build system with first-class monorepo support and powerful integrations.
By migrating your Angular application to an Nx monorepo (there's a simple migration guide), you'll get all these configurations for free. However, NX's real appeal lies in its advanced features, including computation caching, smart rebuilds, distributed task execution, remote build caching, powerful code generators, and editor plugins.

That's it. Thanks for reading!