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

const AuthForm = ({ handleSubmit, setUsername, t }) => (
  <form
    method="post"
    onSubmit={handleSubmit}
    action="/auth-user"
  >
    <Input
      placeholder={t['enter-username']}
      size="l"
      end={<UserProfileIcon />}
      full
      onChange={event => setUsername(event.target.value)}
      label={t.username}
      name="user"
      color="secondary"
    />
    <Button
      size="l"
      color="primary"
      type="submit"
      variant="contained"
    >
      Submit
    </Button>
  </form>
)

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.
'unsorted' — Do not sort items. grouping and newlines behavior are still enforced.

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

fallbackSort

_{type: { type: string; order?: 'asc' | 'desc' }}_{default: { type: 'unsorted' }}

Defines a list of fallback sort options to use when comparing two elements that are equal according to the primary sort type.

Example: enforce alphabetical sort between two elements with the same length.

{
  type: 'line-length',
  order: 'desc'
  fallbackSort: { type: 'alphabetical', order: 'asc' }
}

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.

[DEPRECATED] ignorePattern

_{type:
{
allNamesMatchPattern?: string | string[] | { pattern: string; flags: string } | { pattern: string; flags: string }[]
}}_{default: []}

Use the useConfigurationIf.tagMatchesPattern option alongside type: unsorted instead.

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.

partitionByNewLine

_{default: false}

When true, the rule will not sort members if there is an empty line between them. This can be useful for keeping logically separated groups of members in their defined order.

useConfigurationIf

_{type:
{
allNamesMatchPattern?: string | string[] | { pattern: string; flags: string } | { pattern: string; flags: string }[]
tagMatchesPattern?: string | string[] | { pattern: string; flags: string } | { pattern: string; flags: string }[]
}}_{default: {}}

Allows you to specify filters to match a particular options configuration for a given object type.

The first matching options configuration will be used. If no configuration matches, the default options configuration will be used.

allNamesMatchPattern — A regexp pattern that all keys must match.

Example configuration:

{
  'perfectionist/sort-jsx-props': [
    'error',
    {
      groups: ['r', 'g', 'b'], // Sort tag with colors keys by RGB
      customGroups: {
        r: '^r$',
        g: '^g$',
        b: '^b$',
      },
      useConfigurationIf: {
        allNamesMatchPattern: '^r|g|b$',
      },
    },
    {
      type: 'alphabetical' // Fallback configuration
    }
  ],
}

tagMatchesPattern — A regexp pattern that the JSX tag must match.

Example configuration:

{
  'perfectionist/sort-jsx-props': [
    'error',
    {
      type: 'unsorted', // Do not sort Component elements
      useConfigurationIf: {
        tagMatchesPattern: '*Component$',
      },
    },
    {
      type: 'alphabetical' // Fallback configuration
    }
  ],
}

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.

Newlines between groups

You may place newlinesBetween objects between your groups to enforce the newline behavior between two specific groups.

See the newlinesBetween option.

This feature is only applicable when partitionByNewLine is false.

{
  newlinesBetween: 'always',
  groups: [
    'a',
    { newlinesBetween: 'never' }, // Overrides the global newlinesBetween option
    'b',
  ]
}

customGroups

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

You can define your own groups and use regexp patterns 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

// .eslintrc.js
module.exports = {
  plugins: [
    'perfectionist',
  ],
  rules: {
    'perfectionist/sort-jsx-props': [
      'error',
      {
        type: 'alphabetical',
        order: 'asc',
        fallbackSort: { type: 'unsorted' },
        ignoreCase: true,
        specialCharacters: 'keep',
        ignorePattern: [],
        partitionByNewLine: false,
        newlinesBetween: 'ignore',
        useConfigurationIf: {},
        groups: [],
        customGroups: {},
      },
    ],
  },
}

Version

This rule was introduced in v0.2.0.