useSortedAttributes

JSX and TSX

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

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

How to configure

biome.json

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

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 │   
  

Options

This actions accepts following options

sortOrder

This options supports natural and lexicographic values. Where as natural is the default.

Following will apply the natural sort order.

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "useSortedAttributes": {
          "options": {
            "sortOrder": "natural"
          }
        }
      }
    }
  }
}

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

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

  ℹ The attributes are not sorted. 
  
  > 1 │ <Hello tel={5555555} {…this.props} opt1=“John” opt2="" opt12="" opt11="" />;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Safe fix: Sort the JSX props.
  
    1   │ - <Hello·tel={5555555}·{...this.props}·opt1=“John”·opt2=""·opt12=""·opt11=""·/>;
      1 │ + <Hello·tel={5555555}·{...this.props}·opt1=“John”·opt2=""·opt11=""·opt12=""·/>;
    2 2 │   
  

Following will apply the lexicographic sort order.

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "useSortedAttributes": {
          "options": {
            "sortOrder": "lexicographic"
          }
        }
      }
    }
  }
}

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

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

  ℹ The attributes are not sorted. 
  
  > 1 │ <Hello tel={5555555} {…this.props} opt1=“John” opt2="" opt12="" opt11="" />;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Safe fix: Sort the JSX props.
  
    1   │ - <Hello·tel={5555555}·{...this.props}·opt1=“John”·opt2=""·opt12=""·opt11=""·/>;
      1 │ + <Hello·tel={5555555}·{...this.props}·opt1=“John”·opt11=""·opt12=""·opt2=""·/>;
    2 2 │   
  

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases

HTML

Note

This rule has been implemented but not released yet. It will be available in the next release.

Summary

• Diagnostic Category: assist/source/useSortedAttributes
• Sources:
  • Inspired from @html-eslint/sort-attrs
  • Inspired from vue/attributes-order
  • Inspired from svelte/sort-attributes
  • Inspired from astro/sort-attributes

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

How to configure

biome.json

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

Description

Enforce attribute sorting in HTML elements.

This rule checks if HTML attributes, along with Astro, Svelte, and Vue directives, are sorted in a consistent way. The sort order is:

• Regular HTML attributes, sorted alphabetically according to the sortOrder option
• Astro directives, sorted alphabetically according to sortOrder
• Svelte directives, sorted according to eslint-plugin-svelte’s sort-attributes rule
• Vue directives, sorted according to the Vue.js Style Guide

If two attributes belong to the same category, they will be sorted alphabetically according to sortOrder.

This rule will not consider spread props or the Vue v-bind="object" syntax as sortable. Instead, it will sort each group of consecutive sortable attributes within the element, leaving any spread props or v-bind="object" attributes in place. This prevents breaking the override of certain props using spread props or v-bind="object".

Examples

Invalid

<input type="text" id="name" name="name" />

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

  ℹ The attributes are not sorted.
  
  > 1 │ <input type=“text” id=“name” name=“name” />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Safe fix: Sort the HTML attributes.
  
    1   │ - <input·type=“text”·id=“name”·name=“name”·/>
      1 │ + <input·id=“name”·name=“name”·type=“text”·/>
    2 2 │   
  

<textarea id="mytextarea" name="textarea" rows="5" cols="20" data-1="" data-11="" data-12="" data-2="">Hello, world!</textarea>

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

  ℹ The attributes are not sorted.
  
  > 1 │ <textarea id=“mytextarea” name=“textarea” rows=“5” cols=“20” data-1="" data-11="" data-12="" data-2="">Hello, world!</textarea>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Safe fix: Sort the HTML attributes.
  
    1   │ - <textarea·id=“mytextarea”·name=“textarea”·rows=“5”·cols=“20”·data-1=""·data-11=""·data-12=""·data-2="">Hello,·world!</textarea>
      1 │ + <textarea·cols=“20”·data-1=""·data-2=""·data-11=""·data-12=""·id=“mytextarea”·name=“textarea”·rows=“5”·>Hello,·world!</textarea>
    2 2 │   
  

  <svg slot="fallback" class="generic-avatar" transition:name="avatar">...</svg>

    <input type="range" bind:value={b} min="0" max="10" />

    <div bind:value2={a} bind:value1={a} {...props} style:color="red">...</div>

    <input @input="onInput" :value="text" placeholder="Type here">

Valid

<input id="name" name="name" type="text" />

<textarea cols="20" data-1="" data-2="" data-11="" data-12="" id="mytextarea" name="textarea" rows="5">Hello, world!</textarea>

  <svg class="generic-avatar" slot="fallback" transition:name="avatar">...</svg>

    <input max="10" min="0" type="range" bind:value={b} />

    <div bind:value1={a} bind:value2={a} {...props} style:color="red">...</div>

    <input placeholder="Type here" :value="text" @input="onInput" >

Options

The following options are available

sortOrder

The sort ordering to enforce. Values:

• "[natural](https://en.wikipedia.org/wiki/Natural_sort_order)"
• "[lexicographic](https://en.wikipedia.org/wiki/Lexicographic_order)"

Default: "natural"

Examples for "sortOrder": "lexicographic"

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "useSortedAttributes": {
          "options": {
            "sortOrder": "lexicographic"
          }
        }
      }
    }
  }
}

<textarea id="mytextarea" name="textarea" rows="5" cols="20" data-1="" data-2="" data-11="" data-12="">Hello, world!</textarea>

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

  ℹ The attributes are not sorted.
  
  > 1 │ <textarea id=“mytextarea” name=“textarea” rows=“5” cols=“20” data-1="" data-2="" data-11="" data-12="">Hello, world!</textarea>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Safe fix: Sort the HTML attributes.
  
    1   │ - <textarea·id=“mytextarea”·name=“textarea”·rows=“5”·cols=“20”·data-1=""·data-2=""·data-11=""·data-12="">Hello,·world!</textarea>
      1 │ + <textarea·cols=“20”·data-1=""·data-2=""·data-11=""·data-12=""·id=“mytextarea”·name=“textarea”·rows=“5”·>Hello,·world!</textarea>
    2 2 │   
  

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases