useSortedAttributes

JSX and TSX

Summary

• Rule available since: v2.0.0
• Diagnostic Category: assist/source/useSortedAttributes
• The default severity of this rule is information.
• Sources:
  • Same as react/jsx-sort-props

How to enable in your editor

VS Code

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.action.useSortedAttributes.biome": "explicit",
    "source.fixAll.biome": "explicit"
  }
}

Zed

.zed/settings.json

{
  "code_actions_on_format": {
    "source.action.useSortedAttributes.biome": true,
    "source.fixAll.biome": true
  }
}

Other editors

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

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

<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 │   
  

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

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

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

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

How to configure

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "useSortedAttributes": "on"
      }
    }
  }
}