useSortedAttributes (HTML)

Summary

Rule available since: v2.5.0
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

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 HTML attributes and framework directives into a consistent order.

Regular HTML attributes and Astro directives are sorted by name. Svelte directives follow the order from eslint-plugin-svelte’s sort-attributes rule, and Vue directives follow the Vue attribute-order convention. Attributes within the same category use the configured sortOrder.

A spread attribute or Vue’s v-bind="object" can provide or replace several attributes. The action leaves each spread in place and sorts only the consecutive attributes on either side, preserving override behavior.

Examples

Invalid

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

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

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

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

  ℹ The attributes are not sorted.
  
  > 1 │   <svg slot="fallback" class="generic-avatar" transition:name="avatar">...</svg>
      │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Safe fix: Sort the HTML attributes.
  
    1   │ - ··<svg·slot="fallback"·class="generic-avatar"·transition:name="avatar">...</svg>
      1 │ + ··<svg·class="generic-avatar"·slot="fallback"·transition:name="avatar">...</svg>
    2 2 │

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

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

  ℹ The attributes are not sorted.
  
  > 1 │   	<input type="range" bind:value={b} min="0" max="10" />
      │   	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Safe fix: Sort the HTML attributes.
  
    1   │ - ··→ <input·type="range"·bind:value={b}·min="0"·max="10"·/>
      1 │ + ··→ <input·max="10"·min="0"·type="range"·bind:value={b}·/>
    2 2 │

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

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

  ℹ The attributes are not sorted.
  
  > 1 │   	<div bind:value2={a} bind:value1={a} {...props} style:color="red">...</div>
      │   	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Safe fix: Sort the HTML attributes.
  
    1   │ - ··→ <div·bind:value2={a}·bind:value1={a}·{...props}·style:color="red">...</div>
      1 │ + ··→ <div·bind:value1={a}·bind:value2={a}·{...props}·style:color="red">...</div>
    2 2 │

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

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

  ℹ The attributes are not sorted.
  
  > 1 │   	<input @input="onInput" :value="text" placeholder="Type here">
      │   	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Safe fix: Sort the HTML attributes.
  
    1   │ - ··→ <input·@input="onInput"·:value="text"·placeholder="Type·here">
      1 │ + ··→ <input·placeholder="Type·here"·:value="text"·@input="onInput"·>
    2 2 │

Valid

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

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

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

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

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

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

Options

`sortOrder`

Selects natural or lexicographic ordering. Natural ordering compares numbers by value, so data-2 comes before data-11, and is the default. Lexicographic ordering compares names character by character.

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

code-block.html ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    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-11=""·data-12=""·data-2=""·id="mytextarea"·name="textarea"·rows="5"·>Hello,·world!</textarea>
    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. Listed attributes take precedence over the category-based ordering.

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

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

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

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