useSortedAttributes (JavaScript)

Summary

Rule available since: v2.0.0
Diagnostic Category: assist/source/useSortedAttributes
Sources:
- Same as react/jsx-sort-props

How to enable in your editor

1
{
2
  "editor.codeActionsOnSave": {
3
    "source.action.useSortedAttributes.biome": "explicit",
4
    "source.fixAll.biome": "explicit"
5
  }
6
}

1
{
2
  "code_actions_on_format": {
3
    "source.action.useSortedAttributes.biome": true,
4
    "source.fixAll.biome": true
5
  }
6
}

Use the source action code source.action.useSortedAttributes.biome

How to configure

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "useSortedAttributes": "on"
6
      }
7
    }
8
  }
9
}

Description

Sort JSX attributes by name.

By default, the action uses natural order, which compares numbers by value so that prop9 comes before prop10.

A spread attribute such as {...properties} can provide or replace any attribute. The action therefore treats each spread as a boundary and sorts only the named attributes on each side. It never moves an attribute across a spread.

Examples

1
<Hello lastName="Smith" firstName="John" />;

code-block.jsx ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1   │ - <Hello·lastName="Smith"·firstName="John"·/>;
      1 │ + <Hello·firstName="John"·lastName="Smith"·/>;
    2 2 │

1
<Hello lastName="Smith" firstName="John" {...this.props} tel="0000" address="111 Main Street" {...another.props} />;

code-block.jsx ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1   │ - <Hello·lastName="Smith"·firstName="John"·{...this.props}·tel="0000"·address="111·Main·Street"·{...another.props}·/>;
      1 │ + <Hello·firstName="John"·lastName="Smith"·{...this.props}·tel="0000"·address="111·Main·Street"·{...another.props}·/>;
    2 2 │   
  
code-block.jsx ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1   │ - <Hello·lastName="Smith"·firstName="John"·{...this.props}·tel="0000"·address="111·Main·Street"·{...another.props}·/>;
      1 │ + <Hello·lastName="Smith"·firstName="John"·{...this.props}·address="111·Main·Street"·tel="0000"·{...another.props}·/>;
    2 2 │

Options

`sortOrder`

Selects natural or lexicographic ordering. Natural ordering compares numbers by value and is the default. Lexicographic ordering compares names character by character.

The following configuration uses natural order:

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "useSortedAttributes": {
6
          "level": "on",
7
          "options": {
8
            "sortOrder": "natural"
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

1
<Hello {...this.props} opt1="" opt2="" opt12="" opt11="" />;

code-block.jsx ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1   │ - <Hello·{...this.props}·opt1=""·opt2=""·opt12=""·opt11=""·/>;
      1 │ + <Hello·{...this.props}·opt1=""·opt2=""·opt11=""·opt12=""·/>;
    2 2 │

The following configuration uses lexicographic order:

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "useSortedAttributes": {
6
          "level": "on",
7
          "options": {
8
            "sortOrder": "lexicographic"
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

1
<Hello {...this.props} opt1="" opt2="" opt12="" opt11="" />;

code-block.jsx ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1   │ - <Hello·{...this.props}·opt1=""·opt2=""·opt12=""·opt11=""·/>;
      1 │ + <Hello·{...this.props}·opt1=""·opt11=""·opt12=""·opt2=""·/>;
    2 2 │

`sortFirst`

A list of attribute names that should be sorted before all other attributes, in the order they appear in this list. The remaining attributes are sorted after the listed ones. This is useful to keep attributes such as key first.

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "useSortedAttributes": {
6
          "level": "on",
7
          "options": {
8
            "sortFirst": [
9
              "key"
10
            ]
11
          }
12
        }
13
      }
14
    }
15
  }
16
}

1
<Hello firstName="John" key={id} lastName="Smith" />;

code-block.jsx:1:1 assist/source/useSortedAttributes  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The attributes are not sorted. 
  
  > 1 │ <Hello firstName="John" key={id} lastName="Smith" />;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Safe fix: Sort the JSX props.
  
    1   │ - <Hello·firstName="John"·key={id}·lastName="Smith"·/>;
      1 │ + <Hello·key={id}·firstName="John"·lastName="Smith"·/>;
    2 2 │