sort-jsx-props

JSX の props をグループ順、名前の長さ順、名前順に並べます。

• ルール ID: tai-kun/sort-jsx-props
• 自動修正: あり

JSX の props を「一般 → on* → aria-* → data-*」のグループ順に並べ、各グループ内では名前の長さが短い順、同じ長さなら名前順に並べます。

設定

このルールを有効にするには、vite.config.ts の lint.rules に追加します。

"tai-kun/sort-jsx-props": "error",

例

違反例

const element = (
  <button data-id="x" onClick={run} aria-label="実行">
    OK
  </button>
);

修正後

const element = (
  <button onClick={run} aria-label="実行" data-id="x">
    OK
  </button>
);

注意

• spread props、重複する prop 名、属性間のコメントがある場合は対象外です。
• 単一行と複数行の区切りを保持します。

関連ルール

• sort-import-export-specifiers