sort-jsx-props

Enforce sorted JSX props within JSX elements.

Ensure sorted JSX props within your elements to maintain order and readability. Navigating through numerous props can become challenging, especially as components grow in complexity. This rule enforces consistent sorting, making your code cleaner and easier to manage.

This practice enhances the readability and maintainability of the code by providing a predictable organization of properties. It also sometimes reduces possible errors caused by misplaced or unordered props.

Important

If you use the jsx-sort-props rule from the eslint-plugin-react plugin, it is highly recommended to disable it to avoid conflicts.

It’s safe. The rule considers spread elements in a props list and does not break component functionality.

Try it out

Options

This rule accepts an options object with the following properties:

type

_{default: 'alphabetical'}

Specifies the sorting method.

'alphabetical' — Sort items alphabetically (e.g., “a” < “b” < “c”) using localeCompare.
'natural' — Sort items in a natural order (e.g., “item2” < “item10”).
'line-length' — Sort items by the length of the code line (shorter lines first).
'custom' — Sort items using the alphabet entered in the alphabet option.

order

_{default: 'asc'}

Determines whether the sorted items should be in ascending or descending order.

'asc' — Sort items in ascending order (A to Z, 1 to 9).
'desc' — Sort items in descending order (Z to A, 9 to 1).

alphabet

_{default: ''}

Only used when the type option is set to 'custom'. Specifies the custom alphabet to use when sorting.

Use the Alphabet utility class from eslint-plugin-perfectionist/alphabet to quickly generate a custom alphabet.

Example: 0123456789abcdef...

ignoreCase

_{default: true}

Controls whether sorting should be case-sensitive or not.

true — Ignore case when sorting alphabetically or naturally (e.g., “A” and “a” are the same).
false — Consider case when sorting (e.g., “a” comes before “A”).

specialCharacters

_{default: keep}

Controls whether special characters should be trimmed, removed or kept before sorting.

'keep' — Keep special characters when sorting (e.g., “_a” comes before “a”).
'trim' — Trim special characters when sorting alphabetically or naturally (e.g., “_a” and “a” are the same).
'remove' — Remove special characters when sorting (e.g., “/a/b” and “ab” are the same).

locales

_{default: 'en-US'}

Specifies the sorting locales. See String.prototype.localeCompare() - locales.

string — A BCP 47 language tag (e.g. 'en', 'en-US', 'zh-CN').
string[] — An array of BCP 47 language tags.

ignorePattern

_{default: []}

Allows you to specify names or patterns for JSX elements that should be ignored by this rule. This can be useful if you have specific components that you do not want to sort.

You can specify their names or a regexp pattern to ignore, for example: '^Table.+' to ignore all object types whose names begin with the word Table.

groups

_{type: Array<string | string[]>}_{default: []}

Allows you to specify a list of JSX props groups for sorting. Groups help organize props into categories, making your components more readable and maintainable.

Predefined groups:

'multiline' — Props with multiline values.
'shorthand' — Shorthand props, which are used without a value, typically for boolean props.
'unknown' — Props that don’t fit into any group specified in the groups option.

If the unknown group is not specified in the groups option, it will automatically be added to the end of the list.

Each JSX prop will be assigned a single group specified in the groups option (or the unknown group if no match is found). The order of items in the groups option determines how groups are ordered.

Within a given group, members will be sorted according to the type, order, ignoreCase, etc. options.

Individual groups can be combined together by placing them in an array. The order of groups in that array does not matter. All members of the groups in the array will be sorted together as if they were part of a single group.

customGroups

_{type: { [groupName: string]: string | string[] }}_{default: {}}

You can define your own groups and use regexp pattern to match specific JSX attributes.

Each key of customGroups represents a group name which you can then use in the groups option. The value for each key can either be of type:

string — A JSX prop’s name matching the value will be marked as part of the group referenced by the key.
string[] — A JSX prop’s name matching any of the values of the array will be marked as part of the group referenced by the key. The order of values in the array does not matter.

Custom group matching takes precedence over predefined group matching.

Example

 {
   groups: [
     'multiline',
     'unknown',
     'shorthand',
+    'callback',
   ],
+  customGroups: {     
+    callback: '^on.+'
+  }                   
 }

Usage

Version

This rule was introduced in v0.2.0.