prettier-plugin-angular-comment

Format Angular template literals in JavaScript and TypeScript with an explicit /* Angular */ marker.

Community plugin implementing the behavior proposed in prettier/prettier#20317 for #17615, without changing Prettier core.

Install

npm install -D prettier prettier-plugin-angular-comment

Configure Prettier:

{ "plugins": ["prettier-plugin-angular-comment"] }

Usage

const template = /* Angular */ `
  @if (visible) {
    <span>{{ name }}</span>
  } @else {
    <span>Hidden</span>
  }
`;

The marker is case sensitive and applies only to the following template literal. Existing HTML comments, normal templates, and Angular component templates continue to use Prettier's built-in formatting. JS template expressions (${value}) are supported. Changing whitespace inside a template can change its runtime string value; opt in only where appropriate.

API

import * as prettier from "prettier";
import * as plugin from "prettier-plugin-angular-comment";
const result = await prettier.format(source, { parser: "typescript", plugins: [plugin] });

Set embeddedLanguageFormatting: "off" to disable the plugin's embedding, along with other embedded formatting.

Requirements and limitations

• Prettier 3.x / Node 18+.
• Supports JS/TS parsers backed by the built-in estree printer.
• May conflict with another plugin that also overrides estree.embed. Check plugin order.
• Invalid Angular embedded syntax falls back to normal formatting, consistent with Prettier's embed error handling.

Development

npm install
npm test
npm pack --dry-run

License

MIT