Setting Up ESLint and Prettier in Angular with VS Code and WebStorm

9 min readNov 9, 2024

A Complete Guide to Using ESLint and Prettier in Angular with VS Code and WebStorm

ESLint is used to ensure coding standards for JavaScript (also TypeScript, JSX), catching and fixing potential errors in your code (as a static code analysis tool). It allows to create your own linting rules as well.

Prettier is an opinionated code formatter that helps to beautify code in a consistent style, supporting multiple programming languages and a wide range of file types such as TypeScript, CSS, SCSS, JSON, HTML, YAML, etc.

These two tools are usually used together in projects.

Installation — ESLint

To install ESLint in your Angular project:

ng add @angular-eslint/schematics

The following dependencies are added to “devDependencies” in package.json:

"angular-eslint": "18.4.0",
"eslint": "^9.13.0",
"typescript-eslint": "8.10.0"

Currently, I have the following “typescript” version that was added during the creation of my Angular project:

"typescript": "~5.5.2",

Under “scripts” section, “lint” is added:

 "lint": "ng lint"

In angular.json, under “projects > architect”, the corresponding config is added:

"lint": {
      "builder": "@angular-eslint/builder:lint",
      "options": {
        "lintFilePatterns": [
          "src/**/*.ts",
          "src/**/*.html"
        ]
      }
    }

To instruct Angular CLI to prioritize the “@angular-eslint/schematics” collection when running commands, the following is added:

"cli": {
    "schematicCollections": [
      "@angular-eslint/schematics"
    ]
  }

A new file named “eslint.config.js” is created at the root level of your project; the same level as package.json file.
“.eslintrc.json” config file used to be created for ESLint v8 and before. The new flat file config is named as “eslint.config.js” (ESLint v9 and above).
The file’s content:

// @ts-check
const eslint = require("@eslint/js");
const tseslint = require("typescript-eslint");
const angular = require("angular-eslint");

module.exports = tseslint.config(
  {
    files: ["**/*.ts"],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.recommended,
      ...tseslint.configs.stylistic,
      ...angular.configs.tsRecommended,
    ],
    processor: angular.processInlineTemplates,
    rules: {
      "@angular-eslint/directive-selector": [
        "error",
        {
          type: "attribute",
          prefix: "app",
          style: "camelCase",
        },
      ],
      "@angular-eslint/component-selector": [
        "error",
        {
          type: "element",
          prefix: "app",
          style: "kebab-case",
        },
      ],
    },
  },
  {
    files: ["**/*.html"],
    extends: [
      ...angular.configs.templateRecommended,
      ...angular.configs.templateAccessibility,
    ],
    rules: {},
  }
);

You can set how strict the rules you want to be. For “ESLint Rules Reference”, you can visit:

Rules Reference - ESLint - Pluggable JavaScript Linter

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code…

eslint.org

For example, to allow type “any”, add the following config to “rules” section of “files: [‘**/*.ts’]” in “eslint.config.js” file:

rules: {
      "@typescript-eslint/no-explicit-any": "off", // Allow the use of 'any' type
},

Installation — Prettier

To install Prettier in your Angular project:

npm install prettier --save-dev

The following dependency is added to “devDependencies” in package.json:

"prettier": "^3.3.3",

Now, create a file with the name “.prettierrc” in the root of the project (at the same level as your package.json file).
The “rc” in “.prettierrc” stands for "runtime configuration".
You can also name the file as “.prettierrc.json”, “.prettierrc.yml”, “.prettierrc.yaml” as well. I will use the name “.prettierrc.json”.

To learn more about the configuration options and their possible values, you can visit:

Options · Prettier

Prettier ships with a handful of format options.

prettier.io

This is the content I added to my “.prettierrc.json” file:

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

The options and their corresponding values are as follows:

tabWidth: 2 — the number of spaces per indentation-level
useTabs: false — not to indent lines with tabs but instead with spaces
singleQuote: true — to format code with single quotes instead of double quotes
semi: true — to print semicolons at the ends of statements
bracketSpacing: true — to format code with spaces around the curly braces in objects or arrays
arrowParens: avoid — to avoid parentheses around a sole arrow function parameter.
trailingComma: es5 — use trailing commas in type parameters in TypeScript and Flow where valid in ES5 (objects, arrays, etc.).
bracketSameLine: true — to put the “>” of a multi-line HTML (HTML, JSX, Vue, Angular) element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
printWidth: 150 — to set the line length where Prettier will try to wrap the code to keep code readable. Prettier will wrap it to the following line to keep the code within the specified width.
endOfLine: auto — to maintain existing line endings (mixed values within one file are normalised by looking at what’s used after the first line)

You can also add a “.prettierignore” file to let your editor know which files not to touch.

# Compiled output
/dist
/tmp
/out-tsc
/bazel-out

# Node
/node_modules
npm-debug.log
yarn-error.log

# IDEs and editors
.idea/
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# Visual Studio Code
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*

# Miscellaneous
/.angular/cache
.sass-cache/
/connect.lock
/coverage
/libpeerconnection.log
testem.log
/typings

# System files
.DS_Store
Thumbs.db

Integrating Prettier with ESLint— Combining them together

eslint-config-prettier

Linters usually contain not only code quality rules, but also stylistic rules which may conflict with Prettier. To turn off rules that conflict or are unnecessary with Prettier, you can install:

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

“eslint-config-prettier” turns off all rules that are unnecessary or might conflict with Prettier.

eslint-plugin-prettier

To run Prettier as an ESLint rule and report differences as individual ESLint issues, you should install the following dependency:

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

For flat configuration (our current eslint.config.js file), this plugin ships with an “eslint-plugin-prettier/recommended” config that sets up both “eslint-plugin-prettier” and “eslint-config-prettier” in one go.

Import “eslint-plugin-prettier/recommended” and add “eslintPluginPrettierRecommended” as the last item in the configuration array in your “eslint.config.js” file so that “eslint-config-prettier” has the opportunity to override other configs:

Other dependencies — not necessary

You may come across other types of dependencies such as “prettier-eslint” or “tslint”.

prettier-eslint

“prettier-eslint” is not recommended any more. When I installed it as a dependency, it gave me warnings for incompatibility issues.

There is a StackOverflow post you can read about the differences:

What's the difference between prettier-eslint, eslint-plugin-prettier and eslint-config-prettier?

I want to use Prettier and ESLint together, but I experienced some conflicts just by using them one after another. I…

stackoverflow.com

tslint

TSLint has been the recommended linter in the past but now TSLint is deprecated and ESLint is taking over its duties.

Setting up VS Code

Make sure both ESLint and Prettier extensions are installed in VS Code:

At the root level of your project, you should see an existing “.vscode” folder. Under this folder, add a file named “settings.json”.

If you have a multi-module project folder, .vscode folder may be in a different location so please check it by pressing Cmd + Shift + P and running “Preferences: Open Workspace Settings (JSON)”. This will create and open settings.json file where it is required to be.

In “settings.json” file, I added these lines:

{
  "css.lint.unknownAtRules": "ignore",
  "scss.lint.unknownAtRules": "ignore",
  "eslint.enable": true,
  "eslint.format.enable": true,
  "eslint.validate": ["javascript", "typescript", "html"],
  "eslint.useFlatConfig": true,
  "eslint.workingDirectories": ["../src"],
  "eslint.options": {
    "overrideConfigFile": ".eslintrc.json"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.configPath": ".prettierrc.json",
  "editor.formatOnSave": true
}

If you want ESLint to handle formatting through the “eslint-plugin-prettier” (where ESLint runs Prettier as part of the linting process), you would enable ESLint as the formatter by setting “eslint.format.enable”: true. This makes ESLint responsible for both linting and formatting.

“css.lint.unknownAtRules” and “scss.lint.unknownAtRules” ignore setup will prevent the CSS/SCSS linter in VS Code from complaining about unrecognized at-rules (e.g., @use, @include, or other project-specific custom rules), which can be helpful when using non-standard or framework-specific rules.

As Prettier documentation advised, I also added the ‘editor.defaultFormatter’ config, as you can see in the my settings above.

Prettier — *editor.defaultFormatter config*

Later, press Cmd + Shift + P, type “Format” and select “Format Document With…”:

Choose “Configure Default Formatter…” in the next screen:

Then select “Prettier — Code formatter”:

Your current default may be different; mine is showing Prettier because I implemented these steps earlier.

Again, press Cmd + Shift + P. Type “eslint”. Click on “ESLint: Restart ESLint Server”. After that, run “ESLint: Show Output Channel”.

This will show the output of ESLint running:

You can also filter from the selectbox on the upper right side of the “Output” tab in VS Code (where “Terminal” currently is); this time select “Prettier”:

Now open a component ts file in your project. As you type along, add spaces at the end of your code line and hit Save. You will see the file will be formatted according to the rules given. The output can be seen in Terminal — Prettier, such as:

For example, change “tabWidth” value to “20” in “.prettierrc.json” to see the formatting on save more clearly.

Bulk operations

“lint” command was added under “scripts” section in “package.json” as we installed “angular-eslint/schematics”.

To format files altogether at once with Prettier we can use the following command:

prettier --write .

We can add “format” as a script command in “package.json”:

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "lint": "ng lint",
  "format": "prettier --write ."
},

You can now run:

npm run format

It will output a report of files unchanged and changed together at once:

Now run the following:

npm run lint

Setting up WebStorm

Click WebStorm > Settings.

Search for “eslint”. Under “Languages & Frameworks > JavaScript > Code Quality Tools > Prettier”, select “Manual ESLint configuration”. Select “ESLint package” as “Detect package and configuration file from the nearest package.json”. For working directories, select your project’s “src” directory path.

Check “Run eslint — fix on save” and click “Apply”.

WebStorm — Languages & Frameworks > JavaScript > Code Quality Tools > Prettier

Now, search for “prettier”. Under “Languages & Frameworks > JavaScript > Prettier”, select “Automatic Prettier configuration”. Click “OK”.

WebStorm — Languages & Frameworks > JavaScript > Prettier

Voilà!

Happy Coding!

References:
https://github.com/prettier/eslint-plugin-prettier
https://github.com/prettier/eslint-plugin-prettier
https://code.visualstudio.com/api/advanced-topics/tslint-eslint-migration
https://prettier.io/docs/en/install.html
https://prettier.io/docs/en/configuration.html
https://javascript.plainenglish.io/exploring-the-core-a-series-on-understanding-the-root-of-a-node-project-prettier-2e199c9350f5
https://stackoverflow.com/questions/71627159/is-there-a-way-to-make-a-settings-json-simply-on-a-project
https://www.blouppy.com/blog/2023-01-29-configure-prettier-with-angular/