Skip to content

Enhance jsx-sort-props to allow for non-alphabetically sorted groupings #807

@ericmatthys

Description

@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} />

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions