Registry / devops / prettier-plugin-organize-attributes

prettier-plugin-organize-attributes

library1.0.0jsnpmunverified

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.

devops

npm install prettier-plugin-organize-attributes

github ↗package ↗

INSTALL

IMPORT

SIG · PRETTIER-PLUGIN-OR

prettier-plugin-organize-attributes

devopsjavascriptv1.0.0

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.

plugin (automatically loaded)

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

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

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

attributeGroups (config option)

✓ // .prettierrc { "attributeGroups": ["^class$", "$DEFAULT"] }

✗ // omitting "plugins" key - required since Prettier 3

The option is a string array of regex patterns and special placeholders like $DEFAULT.

attributeSort (config option)

✓ // .prettierrc { "attributeSort": "ASC" }

✗ // using "asc" or true - must be "ASC" or "DESC" string

Case-insensitive? Actually must be uppercase; default is no sort (preserve order).

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>

Debug

Known issues

breakingPrettier 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).

affects: >=1.0.0

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

affects: >=1.0.0

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

affects: >=1.0.0

deprecatedNo deprecated features reported for v1.0.0.

fix

N/A

affects: >=1.0.0

Errors

Common errors & fixes

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

Plugin not installed or not in node_modules.

fix

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

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

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.

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

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" } }] }

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

prettierrequiredpeer dependency: plugin requires Prettier ^3.0.0

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/NiklasPor/prettier-plugin-organize-attributes ↗

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