attr-order

info

🔧 This rule supports auto-fix with the --fix option.

Enforces a consistent order of attributes on elements. By default, attributes are sorted alphabetically. You can configure priority lists, predefined groups (global, event, aria, role, data, spread), and custom patterns to define the desired order.

info

Not included in any preset: the HTML specification doesn't require any particular attribute order, so this is purely a project style preference that needs configuring to be useful.

❌ Examples of incorrect code for this rule

<div style="color: red" class="foo" id="bar"></div>

✅ Examples of correct code for this rule

<div class="foo" id="bar" style="color: red"></div>

Configuration

Priority list

{
  "attr-order": ["id", "class", "style"]
}

Attributes matching the list are placed first in the specified order. Unmatched attributes follow alphabetically.

Predefined groups

{
  "attr-order": [
    { "group": "global" },
    { "group": "role" },
    { "group": "aria" },
    { "group": "event" },
    { "group": "data" }
  ]
}

Group	Matches
global	HTML global attributes (id, class, style, etc.)
event	Event handler attributes (onclick, onchange, etc.)
aria	ARIA attributes (aria-label, aria-hidden, etc.)
role	The role attribute
data	Custom data attributes (data-*)
spread	Spread attributes (JSX {...props})

Pattern matching

{
  "attr-order": [{ "pattern": "^data-" }]
}

A pattern is matched against the attribute name as written in the source, and takes no flags. It does not fold the case of the name: ^id$ matches id but not ID, and [Ii][Dd] matches both spellings.

Attribute name case

Attribute names are compared as the DOM compares them: ID and id on an HTML element are the same attribute, so <div ID class> is already in alphabetical order (class before id). This applies to the alphabetical order, the predefined groups, name entries, and order arrays within a group. Names that are the same attribute keep their source order, and a fix keeps the spelling of each name. On an element that a syntax sets through the DOM API without folding the case (an <svg> in JSX, for example), a name is compared exactly as it is written. The pattern entry is the exception described above.

Group-internal sort order

{
  "attr-order": [
    { "group": "global", "order": "alphabetical" },
    { "group": "aria", "order": ["aria-label", "aria-describedby", "aria-hidden"] },
    { "group": "event", "order": "source-order" }
  ]
}

• "alphabetical" (default) — Sort alphabetically within the group.
• "source-order" — Preserve the original order within the group.
• string[] — Fixed order. Unlisted attributes are appended alphabetically.

Options

alphabetical

Type: boolean Default: true

Whether to sort unmatched attributes alphabetically. When false, unmatched attributes preserve their source order.

{
  "attr-order": {
    "value": ["id", "class"],
    "options": { "alphabetical": false }
  }
}

Interface

{
  "attr-order": undefined[]
}

An ordered list of attribute order entries. Each entry can be a string (attribute name), or an object specifying a group or pattern.

Options

{
  "attr-order": {
    "options": {
      "alphabetical"?: boolean
    }
  }
}

Property	Type	Default Value	Description
alphabetical	boolean	true	Whether to sort unmatched attributes alphabetically.

Default Severity

warning