Eslint-plugin-react: Enhance jsx-sort-props to allow for non-alphabetically sorted groupings

[ericmatthys]

Is there any interest in including a rule like the following in this plugin?

https://github.com/ericmatthys/eslint-plugin-jsx-grouped-sort-props

This is a rule that allows sorting of jsx props in groups without requiring an alphabetical sort. My motivation was wanting specific props sorted first (e.g. key and ref), then all other non-callback props in any order, then all callback props in any order at the end. The rule allows specific prop names in an array or various pre-configured groups (e.g. html, reserved, callback). If there is a spread, it validates the prop order before and after the spread independently. For the use case above, the configuration would look like:

[
  'key',
  'ref',
  { group: 'other' },
  { group: 'callback' }
]

Valid:

<Button
  ref="btn"
  isLoading={true}
  onClick={onClick}
/>

<Button
  ref="btn"
  onClick={onClick}
  {...props}
  isLoading={true}
/>

Invalid:

<Button
  isLoading={true}
  ref="btn"
  onClick={onClick}
/>

<Button
  ref="btn"
  onClick={onClick}
  isLoading={true}
/>

<Button
  ref="btn"
  {...props}
  onClick={onClick}
  isLoading={true}
/>

[ljharb]

I'd also want the ability to require spread props appear first or last.

[Daniel15]

Sounds like an enhanced version of jsx-sort-props. There's already a callbacksLast configuration option.

[ericmatthys]

The main difference regarding callbacksLast is that jsx-sort-props is meant to enforce alphabetical sorting, while this rule is not.

[lencioni]

I agree with @Daniel15. This seems like it would be a good enhancement to jsx-sort-props.

[lencioni]

Related: #786

[yannickcr]

Definitely interested if we can found a way to merge it with the existing jsx-sort-props rule.

[merlinpatt]

My use case for this is that I typically want to put certain props first or last and I don't care about what's in between.

I think a good solution to this would be to have sortFirst and sortLast, which both take arrays of strings or regexes. The arrays would simply contain what props you want first or last respectively.

Examples:

• {sortFirst: [/Id$/]} - props like courseId, gameId would be first
• {sortLast: ['defaultChecked']} - defaultChecked would be last

[mikestopcontinues]

I second @merlinpatt on a regex option. Regarding implementation, what if providing a sortOrder config array disabled callbacksLast, shorthandFirst, shorthandLast, and reservedFirst? Seems like ignoreCase and noSortAlphabetically would still be useful for intra-group sorting. Alternatively, maybe just make it a breaking change? The array config is much more expressive.

Regarding config, there's some nice (and stinky) ideas in the import/order rule. I think prioritizing groups would make the easy use-cases easier:

[
  ['id', 'name', 'className'],
  'reserved',
  'shorthand',
  /Id$/,
  {match: <builtin|regex|array>, alphabetical: false, ignoreCase: true},
  'callbacks',
]

[ljharb]

I prefer not to add regex support in rules; globs should be sufficient.