useSortedAttributes

JSX and TSX

Summary

Section titled Summary

• Rule available since: v2.0.0
• Diagnostic Category: assist/source/useSortedAttributes
• Use the code source.biome.useSortedAttributes in your LSP-ready IDE to apply this action on save.
• The default severity of this rule is information.
• Sources:
  • Same as react/jsx-sort-props

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. 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.js:1:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ type assertion are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” />;
      │ ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ TypeScript only syntax
  
code-block.js:1:25 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Expected a semicolon or an implicit semicolon after a statement, but found none
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” />;
      │                         ^^^^^^^^^
    2 │ 
  
  ℹ An explicit or implicit semicolon is expected here…
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” />;
      │                         ^^^^^^^^^
    2 │ 
  
  ℹ …Which is required to end this statement
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” />;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
code-block.js:1:43 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Expected an expression but instead found ’>‘.
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” />;
      │                                           ^
    2 │ 
  
  ℹ Expected an expression here.
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” />;
      │                                           ^
    2 │ 
  
code-block.js:1:44 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Expected an expression but instead found ’;‘.
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” />;
      │                                            ^
    2 │ 
  
  ℹ Expected an expression here.
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” />;
      │                                            ^
    2 │ 
  

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

code-block.js:1:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ type assertion are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │ ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ TypeScript only syntax
  
code-block.js:1:25 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Expected a semicolon or an implicit semicolon after a statement, but found none
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │                         ^^^^^^^^^
    2 │ 
  
  ℹ An explicit or implicit semicolon is expected here…
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │                         ^^^^^^^^^
    2 │ 
  
  ℹ …Which is required to end this statement
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
code-block.js:1:42 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Expected a semicolon or an implicit semicolon after a statement, but found none
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │                                          ^
    2 │ 
  
  ℹ An explicit or implicit semicolon is expected here…
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │                                          ^
    2 │ 
  
  ℹ …Which is required to end this statement
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │                         ^^^^^^^^^^^^^^^^^^
    2 │ 
  
code-block.js:1:43 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Expected an expression but instead found ‘…this.props’.
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │                                           ^^^^^^^^^^^^^
    2 │ 
  
  ℹ Expected an expression here.
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │                                           ^^^^^^^^^^^^^
    2 │ 
  
code-block.js:1:69 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Expected a semicolon or an implicit semicolon after a statement, but found none
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │                                                                     ^^^^^^^
    2 │ 
  
  ℹ An explicit or implicit semicolon is expected here…
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │                                                                     ^^^^^^^
    2 │ 
  
  ℹ …Which is required to end this statement
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │                                                          ^^^^^^^^^^^^^^^^^^
    2 │ 
  
code-block.js:1:96 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Expected a semicolon or an implicit semicolon after a statement, but found none
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │                                                                                                ^
    2 │ 
  
  ℹ An explicit or implicit semicolon is expected here…
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │                                                                                                ^
    2 │ 
  
  ℹ …Which is required to end this statement
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │                                                                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
code-block.js:1:97 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Expected an expression but instead found ‘…another.props’.
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │                                                                                                 ^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Expected an expression here.
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │                                                                                                 ^^^^^^^^^^^^^^^^
    2 │ 
  
code-block.js:1:133 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Expected an expression but instead found ’>‘.
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │                                                                                                                                     ^
    2 │ 
  
  ℹ Expected an expression here.
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │                                                                                                                                     ^
    2 │ 
  
code-block.js:1:134 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Expected an expression but instead found ’;‘.
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │                                                                                                                                      ^
    2 │ 
  
  ℹ Expected an expression here.
  
  > 1 │ <Hello lastName=“Smith” firstName=“John” {…this.props} tel=“0000” address=“111 Main Street”  {…another.props} lastName=“Smith” />;
      │                                                                                                                                      ^
    2 │ 
  

How to configure

Section titled How to configure

biome.json

{
  "linter": {
    "rules": {
      "source": {
        "useSortedAttributes": "error"
      }
    }
  }
}