sort-jsx-props

💼 This rule is enabled in the following configs: recommended-alphabetical, recommended-line-length, recommended-natural.

🔧 This rule is automatically fixable by the --fix CLI option.

📖 Rule Details

Enforce sorted JSX props within JSX elements.

Maintaining a consistent and sorted order of JSX props can improve code readability, organization, and reduce potential errors caused by misplaced or unordered props.

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

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.

💡 Examples

Alphabetical and Natural Sorting

// ❌ Incorrect
<Input
  color="secondary"
  name="username"
  onChange={event => setUsername(event.target.value)}
  full
  placeholder={t['enter-username']}
  size="l"
  label={t.username}
  end={<UserProfileIcon />}
/>

// ✅ Correct
<Input
  color="secondary"
  end={<UserProfileIcon />}
  full
  label={t.username}
  name="username"
  onChange={event => setUsername(event.target.value)}
  placeholder={t['enter-username']}
  size="l"
/>

Sorting by Line Length

// ❌ Incorrect
<Input
  color="secondary"
  name="username"
  onChange={event => setUsername(event.target.value)}
  full
  placeholder={t['enter-username']}
  size="l"
  label={t.username}
  end={<UserProfileIcon />}
/>

// ✅ Correct
<Input
  onChange={event => setUsername(event.target.value)}
  placeholder={t['enter-username']}
  end={<UserProfileIcon />}
  label={t.username}
  color="secondary"
  name="username"
  size="l"
  full
/>

🔧 Options

This rule accepts an options object with the following properties:

type CustomGroup = string
type Group = 'multiline' | 'shorthand' | 'unknown' | CustomGroup

interface Options {
  type?: 'alphabetical' | 'natural' | 'line-length'
  order?: 'asc' | 'desc'
  'ignore-case'?: boolean
  groups?: (Group | Group[])[]
  'custom-groups': { [key: CustomGroup]: string[] | string }
}

type

_{(default: 'alphabetical')}

• alphabetical - sort alphabetically.
• natural - sort in natural order.
• line-length - sort by code line length.

order

_{(default: 'asc')}

• asc - enforce properties to be in ascending order.
• desc - enforce properties to be in descending order.

ignore-case

_{(default: false)}

Only affects alphabetical and natural sorting. When true the rule ignores the case-sensitivity of the order.

groups

_{(default: [])}

You can set up a list of JSX props groups for sorting. Groups can be combined. There are predefined groups: 'multiline', 'shorthand'.

custom-groups

_{(default: {})}

You can define your own groups for JSX props. The minimatch library is used for pattern matching.

Example:

{
  "custom-groups": {
    "callback": "on*"
  }
}

⚙️ Usage

Legacy Config

// .eslintrc
{
  "plugins": ["perfectionist"],
  "rules": {
    "perfectionist/sort-jsx-props": [
      "error",
      {
        "type": "natural",
        "order": "asc",
        "groups": ["multiline", "unknown", "shorthand"]
      }
    ]
  }
}

Flat Config

// eslint.config.js
import perfectionist from 'eslint-plugin-perfectionist'

export default [
  {
    plugins: {
      perfectionist,
    },
    rules: {
      'perfectionist/sort-jsx-props': [
        'error',
        {
          type: 'natural',
          order: 'asc',
          groups: ['multiline', 'unknown', 'shorthand'],
        },
      ],
    },
  },
]

🚀 Version

This rule was introduced in v0.2.0.

📚 Resources

• Rule source
• Test source