src/content/docs/assist/actions/use-sorted-attributes.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components'; import EditorAction from "@/components/EditorAction.astro";
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v2.0.0` - Diagnostic Category: [`assist/source/useSortedAttributes`](/reference/diagnostics#diagnostic-category) - Sources: - Same as [`react/jsx-sort-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-sort-props.md)## Description
Enforce attribute sorting in JSX elements.
This rule checks if the JSX props are sorted in a consistent way.
Props are sorted alphabetically using a [natural sort order](https://en.wikipedia.org/wiki/Natural_sort_order).
This rule will not consider spread props as sortable.
Instead, whenever it encounters a spread prop, it will sort all the
previous non spread props up until the nearest spread prop, if one
exist.
This prevents breaking the override of certain props using spread
props.
## Examples
```jsx
<Hello lastName="Smith" firstName="John" />;
<Hello lastName="Smith" firstName="John" {...this.props} tel="0000" address="111 Main Street" {...another.props} lastName="Smith" />;
This actions accepts following options
sortOrderThis options supports natural and lexicographic values. Where as natural is the default.
Following will apply the natural sort order.
{
"assist": {
"actions": {
"source": {
"useSortedAttributes": {
"options": {
"sortOrder": "natural"
}
}
}
}
}
}
<Hello tel={5555555} {...this.props} opt1="John" opt2="" opt12="" opt11="" />;
Following will apply the lexicographic sort order.
{
"assist": {
"actions": {
"source": {
"useSortedAttributes": {
"options": {
"sortOrder": "lexicographic"
}
}
}
}
}
}
<Hello tel={5555555} {...this.props} opt1="John" opt2="" opt12="" opt11="" />;