Registry / testing / squidex-prettier-plugin-organize-attributes

squidex-prettier-plugin-organize-attributes

library1.0.1jsnpmunverified

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.

testing

npm install squidex-prettier-plugin-organize-attributes

github ↗package ↗

INSTALL

IMPORT

SIG · SQUIDEX-PRETTIER-P

squidex-prettier-plugin-organize-attributes

testingjavascriptv1.0.1

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

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

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

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

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>

Debug

Known issues

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

affects: >=3.0.0

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

affects: >=0.0.0

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

affects: >=0.0.0

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

affects: >=0.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 i -D prettier-plugin-organize-attributes. Ensure it's in your devDependencies.

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

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.

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

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.

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

prettierrequiredPeer dependency required for plugin to work

Agent activity

13 hits · last 30 days

node

Bingbot

Resources

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

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