Updated November 2026: rewritten for Angular 22 and Prettier 3. The Angular CLI now installs Prettier for you, so this article is about configuring it. I also fixed two option names that Prettier was silently ignoring (useTabs and semi) and added the angular parser for templates.

In a team, code style drifts: one developer uses single quotes and tabs, another double quotes and spaces. A written convention helps, but people forget it. A formatter such as Prettier applies the rules for everyone, automatically.

In this article, we configure Prettier in an Angular 22 project. It is the first article of a series: Configure ESLint with Angular adds a linter, and Configure Husky with Angular runs both before each commit.

Prerequisites

Create an Angular project

Create a new project with the Angular CLI:

Copy 
ng new angular-prettier

The CLI asks a few questions. I chose CSS, no server-side rendering and no AI tools. The first file it creates is worth a look:

Copy 
√ Which stylesheet system would you like to use? CSS             [ https://developer.mozilla.org/docs/Web/CSS ]
√ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
√ Which AI tools should Angular integrate with? https://angular.dev/ai/develop-with-ai None
CREATE angular-prettier/.prettierrc (161 bytes)
CREATE angular-prettier/README.md (1468 bytes)
...
√ Packages installed successfully.
    Successfully initialized git.

Then open the project:

Copy 
cd angular-prettier
code .

Prettier is already installed

Recent versions of the Angular CLI add Prettier to every new project. ng new puts it in the devDependencies of package.json:

Copy 
"devDependencies": {
  "prettier": "^3.8.1"
}

And it generates this .prettierrc:

Copy 
{
  "printWidth": 100,
  "singleQuote": true,
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "angular"
      }
    }
  ]
}

If your project was created with an older CLI, install Prettier yourself as a development dependency (the application does not need it at runtime):

Copy 
npm install prettier --save-dev

Configure Prettier

The .prettierrc file at the root of the project tells editors and other tools that the project uses Prettier, and with which configuration. Let's extend the generated one with the rules of our team:

Copy 
{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": true,
  "quoteProps": "preserve",
  "bracketSpacing": false,
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "angular"
      }
    }
  ]
}

The options:

  • printWidth: the line length at which Prettier wraps.
  • tabWidth: the number of spaces per indentation level.
  • useTabs: indent with tabs instead of spaces.
  • singleQuote: use single quotes instead of double quotes.
  • semi: print semicolons at the end of statements.
  • quoteProps: keep the quotes of object properties as written.
  • bracketSpacing: print spaces between brackets in object literals (false gives {Component} instead of { Component }).
  • overrides: format the *.html files with the angular parser.

tabWidth: 2, useTabs: false and semi: true are the defaults; writing them down documents the team's choice.

Check the option names carefully. The first version of this article used tabs and semicolon, which are not Prettier options. Prettier 3 says so, then applies its defaults:

Copy 
Checking formatting...
[warn] Ignored unknown option { tabs: false }.
[warn] Ignored unknown option { semicolon: true }.
[warn] src/app/app.ts
[warn] Code style issues found in the above file. Run Prettier with --write to fix.

Why the angular parser?

Prettier infers the angular parser only for files named *.component.html. Following the current style guide, the Angular CLI names its files app.html, app.ts… without the .component suffix. Without the override, a template is formatted as plain HTML and the control flow blocks (@if, @for…) are not indented. Take this messy template:

Copy 
@if (items().length > 0) {
<ul>
@for (item of items(); track item.id) {<li>{{ item.name }}</li>}
</ul>
} @else {<p>No items</p>}

With the html parser:

Copy 
@if (items().length > 0) {
<ul>
  @for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
  }
</ul>
} @else {
<p>No items</p>
}

With the angular parser:

Copy 
@if (items().length > 0) {
  <ul>
    @for (item of items(); track item.id) {
      <li>{{ item.name }}</li>
    }
  </ul>
} @else {
  <p>No items</p>
}

Note: Since Prettier 3, the default value of trailingComma is "all": Prettier adds a trailing comma wherever possible in multi-line code, function arguments included. That is why the code generated by the CLI ends its multi-line objects with a comma. Set "trailingComma": "es5" or "none" if your team prefers.

Ignore files

A .prettierignore file tells Prettier which files not to format. Create it at the root of the project:

Copy 
dist
.angular
coverage
package-lock.json

dist is the build output, .angular the Angular CLI cache and coverage the code coverage report.

Note: By default, Prettier ignores version control directories (.git, .jj, .sl, .svn, .hg) and node_modules. It also follows the rules of the .gitignore file of the directory it runs from.

Check files

To check the formatting of every file (except the ignored ones), use the CLI:

Copy 
npx prettier --check .

npx runs the Prettier installed in the project's node_modules, so everyone uses the same version. You can also pass a glob, for example npx prettier --check "src/app/**/*.{ts,html}".

Let's add a script to the scripts section of package.json (inside an npm script, npx is not needed: npm finds the commands of node_modules/.bin):

Copy 
"format-check": "prettier --check ."

Then run it:

Copy 
$ npm run format-check

> angular-prettier@0.0.0 format-check
> prettier --check .

Checking formatting...
[warn] src/app/app.config.ts
[warn] src/app/app.html
[warn] src/app/app.routes.ts
[warn] src/app/app.spec.ts
[warn] src/app/app.ts
[warn] src/main.ts
[warn] Code style issues found in 6 files. Run Prettier with --write to fix.

These files were generated with { Component }, and our configuration wants {Component}.

Format files

To format the files, replace --check with --write, and add the matching script:

Copy 
"format": "prettier --write ."
Copy 
$ npm run format

> angular-prettier@0.0.0 format
> prettier --write .

.prettierrc 22ms (unchanged)
...
src/app/app.config.ts 35ms
src/app/app.html 112ms
src/app/app.routes.ts 2ms
src/app/app.spec.ts 13ms
src/app/app.ts 5ms
...
src/main.ts 3ms

In app.ts, the imports lose the spaces between their brackets:

Copy 
-import { Component, signal } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import {Component, signal} from '@angular/core';
+import {RouterOutlet} from '@angular/router';

The template is formatted too: in app.html, the objects inside the @for block become {title: 'CLI Docs', link: 'https://angular.dev/tools/cli'}, which shows that the angular parser also formats the expressions of the control flow.

Note: If you also use ESLint, add eslint-config-prettier to your ESLint configuration. It turns off the ESLint rules that are unnecessary or might conflict with Prettier (see Integrating with linters). We do exactly that in Configure Husky with Angular.

Conclusion

In this article, we configured the Prettier that the Angular CLI installs: team options in .prettierrc, the angular parser for templates, a .prettierignore file, and two scripts to check and format the code.

The next article of the series adds ESLint to an Angular project.

Source code of the article: GitHub source code

References