prettier-plugin-angular

A Prettier plugin for Angular HTML templates that formats, aligns, and sorts element attributes.

What it does

Attribute alignment

Attributes are formatted using the minimum number of lines needed:

• Single line — if everything fits within printWidth:

  <input type="text" [value]="v" />

• Aligned — first attribute inline with the tag, rest aligned to the same column:

  <p-select [options]="companiesForSelector()"
            [attr.aria-invalid]="form.controls.companyId.invalid"
            id="companyId"
            class="w-full"
            filter
            showClear />

• Fallback — if the tag itself is too long to inline the first attribute, each attribute on its own line indented by tabWidth:

  <my-very-long-component-name
    [options]="items"
    (change)="onChange($event)"
    class="w-full" />

Attribute sorting

Attributes are sorted by category in this order:

| Category | Examples | |----------|---------| | ref | #myRef | | structural | *ngIf, *ngFor | | twoWay | [(ngModel)] | | input | [value], [disabled], [attr.aria-label] | | output | (click), (ngModelChange) | | animation | [@fadeIn] | | static | id="x", class="foo", formControlName="x" | | boolean | disabled, required, showIcon |

Self-closing elements

Elements with no real children are always output as self-closing, regardless of how they were written in the source:

<!-- Input -->
<app-my-component [value]="x" [label]="y"></app-my-component>

<!-- Output -->
<app-my-component [value]="x" [label]="y" />

This also applies to elements with only whitespace between their tags.

Angular control flow formatted

Elements inside @if, @for, @switch, @defer and other Angular control flow blocks are fully formatted — not emitted verbatim:

@if (form.controls.companyId.invalid && form.controls.companyId.touched) {
  <small id="companyId-error" class="p-error block mt-1" role="alert">
    {{ 'validation.required' | translate }}
  </small>
}

Install

npm install -D prettier-plugin-angular

Configure

In .prettierrc:

{
  "plugins": ["prettier-plugin-angular"],
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "angular-attributes",
        "angularAttributeSort": true
      }
    }
  ]
}

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | angularAttributeSort | boolean | true | Sort attributes by category | | angularAttributeOrder | string[] | ["ref","structural","twoWay","input","output","animation","static","boolean"] | Category order (any subset, in your preferred order) |

Full example

Input:

<p-select class="w-full" (change)="onChange($event)" [options]="items" inputId="x" #sel showIcon />

Output:

<p-select [options]="items"
          (change)="onChange($event)"
          inputId="x"
          class="w-full"
          #sel
          showIcon />