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”).
'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).

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).

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”).

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 glob pattern to ignore, for example: 'Table*' to ignore all object types whose names begin with the word Table.

groups

_{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. Multiple groups can be combined to achieve the desired sorting order.

There are predefined groups: 'multiline', 'shorthand'.

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 other group.

customGroups

_{default: {}}

You can define your own groups for JSX props using custom glob patterns for matching.

Example:

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

Usage

Version

This rule was introduced in v0.2.0.