prettier-plugin-organize-attributes

1.0.0 verified Sat Apr 25 auth: no javascript

Prettier plugin to automatically organize HTML attributes in a configurable order. Version 1.0.0, stable, actively maintained. Supports Angular, Vue, and plain HTML with zero configuration. Allows custom attribute groups via regex or presets, attribute sorting (ASC/DESC), and case-insensitive matching. Key differentiator: structured group-based ordering rather than simple alphabetical, with built-in presets for popular frameworks. Requires Prettier ^3.0.0.

Common errors

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

cause Plugin not installed or not in node_modules.

fix

Run npm install --save-dev prettier-plugin-organize-attributes.

error Error: [prettier-plugin-organize-attributes] No matching preset/group for attribute 'xyz' ↓

cause Attribute does not match any group and $DEFAULT is not present.

fix

Add '$DEFAULT' to attributeGroups array in config, or add a specific group covering that attribute.

error prettier --write fails silently with no changes even though plugin is in config ↓

cause File extension not associated with 'html' parser; plugin only runs on HTML-like files.

fix

Add overrides in Prettier config: { "overrides": [{ "files": "*.template", "options": { "parser": "html" } }] }

Warnings

breaking Prettier 3 requires explicit plugin declaration in config; old per-file loading is removed. ↓

fix Add "plugins": ["prettier-plugin-organize-attributes"] to .prettierrc (or other config file).

gotcha The plugin only processes files matching default Prettier HTML parser extensions (e.g., .html, .component.html, .vue). Other file types are ignored. ↓

fix Ensure file extensions are recognized; override with overrides if needed.

gotcha Attribute groups are matched in order; an attribute matched by first group is not available for subsequent groups. $DEFAULT captures all unmatched. ↓

fix Place $DEFAULT after specific groups if you want explicit ordering, or omit to append at end.

deprecated No deprecated features reported for v1.0.0. ↓

fix N/A

Install

npm install prettier-plugin-organize-attributes

yarn add prettier-plugin-organize-attributes

pnpm add prettier-plugin-organize-attributes

Imports

plugin (automatically loaded)

wrong

// using require() or import in code - not needed, configured via Prettier config

correct

// add to .prettierrc: { "plugins": ["prettier-plugin-organize-attributes"] }

Plugin is loaded by Prettier via configuration, not directly imported in source code.

attributeGroups (config option)
wrong
```
// omitting "plugins" key - required since Prettier 3
```
correct
```
// .prettierrc
{ "attributeGroups": ["^class$", "$DEFAULT"] }
```
The option is a string array of regex patterns and special placeholders like $DEFAULT.
attributeSort (config option)
wrong
```
// using "asc" or true - must be "ASC" or "DESC" string
```
correct
```
// .prettierrc
{ "attributeSort": "ASC" }
```
Case-insensitive? Actually must be uppercase; default is no sort (preserve order).

Quickstart

Shows installation, configuration with custom groups and sorting, and a run example.

// Install
npm install --save-dev prettier prettier-plugin-organize-attributes

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

// Input: index.html
<div id="myid" class="myclass" src="img.jpg"></div>

// Run: npx prettier --write index.html
// Output:
// <div class="myclass" id="myid" src="img.jpg"></div>