eslint-plugin-react
eslint-plugin-react copied to clipboard
[New] `jsx-sort-props`: add `sortFirst` option to explicitly specify prop names to sort first
Fixes: #3175 #3639 #3193
[!WARNING] I had to pin the ESLint version in the published types test project, as the ESLint types break with TypeScript 4.0 starting with ESLint 9.39.0. This can also be fixed by dropping support for TypeScript 4.0.
Let me know if I should remove 4.0 from the matrix instead.
Adds a sortFirst option to enforce that specified props appear first, in the given order. Takes precedence over other sorting options (reservedFirst, shorthandFirst, callbacksLast, multiline).
Examples:
// Configuration: { sortFirst: ['className', 'id'] }
// ❌ Incorrect
<Hello name="John" className="test" id="test" />
<Hello id="test" className="test" />
// ✅ Correct
<Hello className="test" id="test" name="John" />
// Configuration: { sortFirst: ['className'], ignoreCase: true }
// ❌ Incorrect
<Hello name="John" classname="test" />
// ✅ Correct
<Hello classname="test" name="John" />
Props in sortFirst maintain their specified order relative to each other, and all appear before other props.