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.

[merlinstardust]

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.

[ljharb]

I've rethought my opinion here.

While this would be a possible (feasible) option on jsx-sort-props, I think it would not be a good idea. Enforcing a magic, arbitrary sorting of props that isn't based on something you can see by looking directly at the prop names would be incredibly confusing, and relying on the autofixer to understand what the "right" thing doesn't remove that problem.

I think that it's best that props either be unordered, or, ordered by simple-to-understand rules and categories, which currently include "reserved by react" props like key and ref etc, "alphabetical", "boolean shorthand", and "callbacks". Arguably, this is already too complex.

I'm going to close this for now.