Registry / web-framework / prettier-plugin-angular

prettier-plugin-angular

library0.3.2jsnpmunverified

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.

web-framework devops testing

npm install prettier-plugin-angular

github ↗package ↗

INSTALL

IMPORT

SIG · PRETTIER-PLUGIN-AN

prettier-plugin-angular

web-frameworkjavascriptv0.3.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

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

✗ import prettierPluginAngular from 'prettier-plugin-angular';

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

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

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

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

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"

Debug

Known issues

breakingRequires 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

affects: <3.0.0

gotchaPlugin 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.

affects: all

gotchaSelf-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.

affects: all

gotchaAttribute 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.

affects: all

gotchaThe 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.

affects: all

Errors

Common errors & fixes

Cannot find module 'prettier-plugin-angular'

Plugin not installed or Prettier cannot resolve it.

fix

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

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

Plugin not registered in .prettierrc plugins array.

fix

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

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

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

Warning: angularAttributeSort option is not supported (ignored)

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.

Upgrade

Version history

0.3.2latest on npm

Audit

Dependencies

prettierrequiredpeer dependency — Prettier >=3.0.0 required to load the plugin

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/p-otero/prettier-plugin-angular ↗

packagehttps://www.npmjs.com/package/prettier-plugin-angular ↗