Prettier Plugin Organize Attributes

1.0.1 verified Sat Apr 25 auth: no javascript

A Prettier plugin that automatically organizes HTML attributes in Angular, Vue, and plain HTML files. Version 1.0.1 requires Prettier ^3.0.0 and Node >=14.0.0. It groups attributes using RegExps or predefined presets (e.g., HTML, Angular, Vue, Code-Guide) and supports sorting within groups in ascending or descending order. Unlike alternative attribute formatters, it integrates directly into Prettier's workflow with zero configuration for common frameworks. Ships with TypeScript typings.

Common errors

error Error: Cannot find module 'prettier-plugin-organize-attributes' ↓

cause Plugin not installed or not in node_modules.

fix

Run: npm i -D prettier-plugin-organize-attributes. Ensure it's in your devDependencies.

error Error: [prettier-plugin-organize-attributes] Unknown attribute group: $CUSTOM ↓

cause Referenced a group name that doesn't exist (e.g., $CUSTOM is not a predefined preset).

fix

Use valid preset names: $ANGULAR_OUTPUT, $ANGULAR_TWO_WAY_BINDING, $ANGULAR_INPUT, $ANGULAR_STRUCTURAL_DIRECTIVE, or custom regex strings.

error TypeError: Cannot read properties of undefined (reading 'match') ↓

cause Plugin applied to unsupported file type (e.g., .js) or unparseable HTML.

fix

Ensure you run Prettier on .html, .component.html, or .vue files. Verify the HTML is valid.

Warnings

breaking Prettier v3 removed auto-discovery of plugins; you must explicitly list plugins in .prettierrc. ↓

fix Add 'plugins' array to your Prettier config: { "plugins": ["prettier-plugin-organize-attributes"] }

gotcha Attributes not matching any group are placed at the end unless $DEFAULT is explicitly defined. ↓

fix If you want unmatched attributes to be placed in a specific position, include $DEFAULT in your attributeGroups array.

gotcha The plugin only works on .html, .component.html (Angular), and .vue files by default. Other extensions may not trigger organization. ↓

fix Ensure your files have the correct extension. For custom extensions, you may need to configure Prettier's overrides.

gotcha attributeSort affects all groups; you cannot set different sort orders per group. ↓

fix Use attributeSort: 'ASC' or 'DESC' globally. If per-group sorting is needed, consider workarounds like separating into multiple runs.

Install

npm install squidex-prettier-plugin-organize-attributes

yarn add squidex-prettier-plugin-organize-attributes

pnpm add squidex-prettier-plugin-organize-attributes

Imports

Plugin

wrong

// Do not use require() syntax in ESM
const plugin = require('prettier-plugin-organize-attributes');

correct

// No explicit import needed; add to .prettierrc plugins array
{
  "plugins": ["prettier-plugin-organize-attributes"]
}

Plugin is auto-discovered by Prettier when listed in config. No direct import in code.

Quickstart

Installs and configures the plugin to organize HTML attributes in Prettier, grouping by regex and sorting alphabetically.

// 1. Install
// npm i prettier prettier-plugin-organize-attributes -D

// 2. Configure .prettierrc
{
  "plugins": ["prettier-plugin-organize-attributes"],
  "attributeGroups": ["^class$", "^(id|name)$", "$DEFAULT"],
  "attributeSort": "ASC"
}

// 3. Run Prettier
// Input: <div id="id" name="name" class="class" custom="custom"></div>
// Output: <div class="class" id="id" name="name" custom="custom"></div>