useSortedAttributes

JSX and TSX

Summary

Section titled 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

Section titled How to enable in your editor

Zed

~/.config/zed/settings.json

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

VS Code

.vscode/settings.json

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

Other editors

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

Description

Section titled 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

Section titled 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

Section titled How to configure

biome.json

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