{"id":20339,"library":"prettier-plugin-angular","title":"prettier-plugin-angular","description":"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.","status":"active","version":"0.3.2","language":"javascript","source_language":"en","source_url":"https://github.com/p-otero/prettier-plugin-angular","tags":["javascript","prettier","prettier-plugin","angular","html","formatter","typescript"],"install":[{"cmd":"npm install prettier-plugin-angular","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-angular","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-angular","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency — Prettier >=3.0.0 required to load the plugin","package":"prettier","optional":false}],"imports":[{"note":"Plugin is registered in .prettierrc, not imported directly.","wrong":"import prettierPluginAngular from 'prettier-plugin-angular';","symbol":"default","correct":"const prettier = require('prettier'); (no direct import of plugin necessary; plugin is auto-loaded via .prettierrc)"},{"note":"No direct TypeScript types exported by this package; use Prettier's own types.","symbol":"types","correct":"import type { Plugin } from 'prettier'; (TypeScript types from Prettier)"},{"note":"Options are not exported as symbols; set via Prettier configuration.","wrong":"import { angularAttributeSort } from 'prettier-plugin-angular';","symbol":"PrettierOptions","correct":"// No exported symbols; set options in .prettierrc or via Prettier API with { parser: 'angular-attributes', angularAttributeSort: true }"}],"quickstart":{"code":"// Install: npm install -D prettier prettier-plugin-angular\n// Create .prettierrc:\n{\n  \"plugins\": [\"prettier-plugin-angular\"],\n  \"overrides\": [\n    {\n      \"files\": \"*.html\",\n      \"options\": {\n        \"parser\": \"angular-attributes\",\n        \"angularAttributeSort\": true\n      }\n    }\n  ]\n}\n// Format: npx prettier --write \"**/*.html\"","lang":"typescript","description":"Install and configure the plugin for Angular HTML template formatting with attribute sorting enabled."},"warnings":[{"fix":"Upgrade Prettier to version 3.0.0 or higher: npm install -D prettier@^3.0.0","message":"Requires Prettier >=3.0.0. Plugin will not work with Prettier 2.x.","severity":"breaking","affected_versions":"<3.0.0"},{"fix":"Add overrides in .prettierrc targeting '*.html' with parser 'angular-attributes' as shown in quickstart.","message":"Plugin only formats files with parser 'angular-attributes'. Default HTML parser will not apply plugin's features.","severity":"gotcha","affected_versions":"all"},{"fix":"Ensure components do not depend on whitespace children. Use <ng-content> explicitly.","message":"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.","severity":"gotcha","affected_versions":"all"},{"fix":"Add \"angularAttributeSort\": false to the overrides options.","message":"Attribute sorting is enabled by default (angularAttributeSort: true). If you do not want sorting, set it to false.","severity":"gotcha","affected_versions":"all"},{"fix":"Extract inline templates to separate .html files for formatting.","message":"The plugin does not handle inline templates (template: `<div>...</div>`) in TypeScript/JavaScript files; only standalone .html files.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run: npm install -D prettier-plugin-angular. Ensure package.json includes it in devDependencies.","cause":"Plugin not installed or Prettier cannot resolve it.","error":"Cannot find module 'prettier-plugin-angular'"},{"fix":"Add \"plugins\": [\"prettier-plugin-angular\"] to .prettierrc.","cause":"Plugin not registered in .prettierrc plugins array.","error":"Error: Invalid parser 'angular-attributes', the parsers listed are: [list of parsers]"},{"fix":"Upgrade Prettier to version 3.0.0 or later: npm install -D prettier@^3.0.0","cause":"Occurs when using Prettier 2.x with this plugin.","error":"Error: Cannot read properties of undefined (reading 'type')"},{"fix":"Use overrides to set parser to 'angular-attributes' for .html files as shown in quickstart.","cause":"Prettier configuration not targeting the correct parser via overrides.","error":"Warning: angularAttributeSort option is not supported (ignored)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}