prettier-plugin-angular weekly downloads statistics

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: • Aligned — first attribute inline with the tag, rest aligned to the same column: • Fallback — if the tag itself is too long to inline the first attribute, each attribute on its own line indented by tabWidth:

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:

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:

Install

Configure

In .prettierrc:

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:

Output:

Description from the npm listing.