attr-order

備考

🔧 このルールは --fix オプションによる自動修正に対応しています。

要素の属性の順序を統一します。デフォルトではアルファベット順にソートされます。優先度リスト、定義済みグループ（global、event、aria、data、spread）、カスタムパターンを使って順序を指定できます。

❌ 間違ったコード例

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

✅ 正しいコード例

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

設定

優先度リスト

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

リストにマッチした属性が先頭に配置されます。マッチしなかった属性はアルファベット順で続きます。

定義済みグループ

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

グループ	マッチ対象
global	HTMLグローバル属性（id、class、style など）
event	イベントハンドラ属性（onclick、onchange など）
aria	ARIA属性（aria-label、aria-hidden など）
data	カスタムデータ属性（data-*）
spread	スプレッド属性（JSXの {...props}）

パターンマッチ

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

グループ内ソート順

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

• "alphabetical"（デフォルト） — グループ内でアルファベット順にソート。
• "source-order" — グループ内で元の順序を維持。
• string[] — 固定順序。リストにない属性はアルファベット順で末尾に追加。

オプション

alphabetical

型: boolean デフォルト: true

マッチしなかった属性をアルファベット順にソートするかどうか。false の場合、マッチしなかった属性は元の順序を維持します。

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

Interface

{
  "attr-order": undefined[]
}

属性の順序を定義するエントリのリスト。各エントリは文字列（属性名）またはグループ/パターンを指定するオブジェクトです。

Options

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

Property	Type	Default Value	Description
alphabetical	boolean	true	マッチしなかった属性をアルファベット順にソートするかどうか。

Default Severity

warning