sort-jsx-props
Sort JSX props by group, name length, and name.
- Rule ID:
tai-kun/sort-jsx-props - Auto-fix: Yes
Sorts JSX props in the group order general → on* → aria-* → data-*, then by name length and name inside each group.
Configuration
Add the rule to lint.rules in vite.config.ts to enable it.
"tai-kun/sort-jsx-props": "error",Examples
Invalid
const element = (
<button data-id="x" onClick={run} aria-label="Run">
OK
</button>
);Valid
const element = (
<button onClick={run} aria-label="Run" data-id="x">
OK
</button>
);Notes
- Spread props, duplicate prop names, and comments between attributes are skipped.
- Single-line and multiline layouts are preserved.