prettier-plugin-angular

0.3.2 verified Sat Apr 25 auth: no javascript

A Prettier plugin for formatting Angular HTML templates by aligning attributes on multiple lines using minimum line breaks, sorting attributes by category (ref, structural, twoWay, input, output, animation, static, boolean), outputting self-closing elements, and formatting Angular control flow blocks (@if, @for, etc.). Current stable version is 0.3.2, released on npm with Prettier >=3.0.0 as a peer dependency. Key differentiators include attribute alignment strategies (single-line, aligned, fallback), configurable attribute order via angularAttributeOrder, and built-in handling of Angular-specific syntax. Ships TypeScript type declarations.

Common errors

error Cannot find module 'prettier-plugin-angular' ↓

cause Plugin not installed or Prettier cannot resolve it.

fix

Run: npm install -D prettier-plugin-angular. Ensure package.json includes it in devDependencies.

error Error: Invalid parser 'angular-attributes', the parsers listed are: [list of parsers] ↓

cause Plugin not registered in .prettierrc plugins array.

fix

Add "plugins": ["prettier-plugin-angular"] to .prettierrc.

error Error: Cannot read properties of undefined (reading 'type') ↓

cause Occurs when using Prettier 2.x with this plugin.

fix

Upgrade Prettier to version 3.0.0 or later: npm install -D prettier@^3.0.0

error Warning: angularAttributeSort option is not supported (ignored) ↓

cause Prettier configuration not targeting the correct parser via overrides.

fix

Use overrides to set parser to 'angular-attributes' for .html files as shown in quickstart.

Warnings

breaking Requires Prettier >=3.0.0. Plugin will not work with Prettier 2.x. ↓

fix Upgrade Prettier to version 3.0.0 or higher: npm install -D prettier@^3.0.0

gotcha Plugin only formats files with parser 'angular-attributes'. Default HTML parser will not apply plugin's features. ↓

fix Add overrides in .prettierrc targeting '*.html' with parser 'angular-attributes' as shown in quickstart.

gotcha Self-closing elements: elements with whitespace-only content are also made self-closing. This may break Angular components that rely on content projection with text nodes. ↓

fix Ensure components do not depend on whitespace children. Use <ng-content> explicitly.

gotcha Attribute sorting is enabled by default (angularAttributeSort: true). If you do not want sorting, set it to false. ↓

fix Add "angularAttributeSort": false to the overrides options.

gotcha The plugin does not handle inline templates (template: `<div>...</div>`) in TypeScript/JavaScript files; only standalone .html files. ↓

fix Extract inline templates to separate .html files for formatting.

Install

npm install prettier-plugin-angular

yarn add prettier-plugin-angular

pnpm add prettier-plugin-angular

Imports

default

wrong

import prettierPluginAngular from 'prettier-plugin-angular';

correct

const prettier = require('prettier'); (no direct import of plugin necessary; plugin is auto-loaded via .prettierrc)

Plugin is registered in .prettierrc, not imported directly.

types
```
import type { Plugin } from 'prettier'; (TypeScript types from Prettier)
```
No direct TypeScript types exported by this package; use Prettier's own types.

PrettierOptions

wrong

import { angularAttributeSort } from 'prettier-plugin-angular';

correct

// No exported symbols; set options in .prettierrc or via Prettier API with { parser: 'angular-attributes', angularAttributeSort: true }

Options are not exported as symbols; set via Prettier configuration.

Quickstart

Install and configure the plugin for Angular HTML template formatting with attribute sorting enabled.

// Install: npm install -D prettier prettier-plugin-angular
// Create .prettierrc:
{
  "plugins": ["prettier-plugin-angular"],
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "angular-attributes",
        "angularAttributeSort": true
      }
    }
  ]
}
// Format: npx prettier --write "**/*.html"