useSortedKeys (JavaScript)

Summary

Rule available since: v2.0.0
Diagnostic Category: assist/source/useSortedKeys
Sources:
- Inspired from sort-keys
- Inspired from perfectionist/sort-objects

How to enable in your editor

1
{
2
  "editor.codeActionsOnSave": {
3
    "source.action.useSortedKeys.biome": "explicit",
4
    "source.fixAll.biome": "explicit"
5
  }
6
}

1
{
2
  "code_actions_on_format": {
3
    "source.action.useSortedKeys.biome": true,
4
    "source.fixAll.biome": true
5
  }
6
}

Use the source action code source.action.useSortedKeys.biome

How to configure

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "useSortedKeys": "on"
6
      }
7
    }
8
  }
9
}

Description

Sort the properties of a JavaScript object.

By default, the action uses natural order: uppercase letters come before lowercase letters (A before a), and numbers are compared by value (item9 before item10).

Spread properties such as ...other and computed property names such as [key] cannot be safely reordered. Each one forms a boundary; the action sorts named properties on each side independently. This preserves the order in which spread properties can replace earlier values.

Object property order is observable. Sorting can change the results of Object.getOwnPropertyNames, Object.keys, JSON.stringify, and for...in loops. If code relies on the original order, disable the action with a suppression comment:

// biome-ignore assist/source/useSortedKeys

Examples

1
const obj = {
2
  x: 1,
3
  a: 2,
4
};

code-block.js ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1 1 │   const obj = {
    2   │ - ··x:·1,
    3   │ - ··a:·2,
      2 │ + ··a:·2,
      3 │ + ··x:·1,
    4 4 │   };
    5 5 │

1
const obj = {
2
  x: 1,
3
  ...f,
4
  y: 4,
5
  a: 2,
6
  [calculated()]: true,
7
  b: 3,
8
  a: 1,
9
};

code-block.js ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
     2  2 │     x: 1,
     3  3 │     ...f,
     4    │ - ··y:·4,
     5    │ - ··a:·2,
        4 │ + ··a:·2,
        5 │ + ··y:·4,
     6  6 │     [calculated()]: true,
     7    │ - ··b:·3,
     8    │ - ··a:·1,
        7 │ + ··a:·1,
        8 │ + ··b:·3,
     9  9 │   };
    10 10 │

1
const obj = {
2
  get aab() {
3
    return this._aab;
4
  },
5
  set aac(v) {
6
    this._aac = v;
7
  },
8
  w: 1,
9
  x: 1,
10
  ...g,
11
  get aaa() {
12
    return "";
13
  },
14
  u: 1,
15
  v: 1,
16
  [getProp()]: 2,
17
  o: 1,
18
  p: 1,
19
  q: 1,
20
}

Options

`sortOrder`

Selects natural or lexicographic ordering. Natural ordering compares numbers by value and is the default. Lexicographic ordering compares property names character by character.

The following configuration uses natural order:

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "useSortedKeys": {
6
          "level": "on",
7
          "options": {
8
            "sortOrder": "natural"
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

1
const obj = {
2
    val13: 1,
3
    val1: 1,
4
    val2: 1,
5
    val21: 1,
6
    val11: 1,
7
};

code-block.js ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1 1 │   const obj = {
    2   │ - ····val13:·1,
    3   │ - ····val1:·1,
    4   │ - ····val2:·1,
    5   │ - ····val21:·1,
    6   │ - ····val11:·1,
      2 │ + ····val1:·1,
      3 │ + ····val2:·1,
      4 │ + ····val11:·1,
      5 │ + ····val13:·1,
      6 │ + ····val21:·1,
    7 7 │   };
    8 8 │

The following configuration uses lexicographic order.

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "useSortedKeys": {
6
          "level": "on",
7
          "options": {
8
            "sortOrder": "lexicographic"
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

1
const obj = {
2
    val13: 1,
3
    val1: 1,
4
    val2: 1,
5
    val21: 1,
6
    val11: 1,
7
};

code-block.js ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1 1 │   const obj = {
    2   │ - ····val13:·1,
    3   │ - ····val1:·1,
    4   │ - ····val2:·1,
    5   │ - ····val21:·1,
    6   │ - ····val11:·1,
      2 │ + ····val1:·1,
      3 │ + ····val11:·1,
      4 │ + ····val13:·1,
      5 │ + ····val2:·1,
      6 │ + ····val21:·1,
    7 7 │   };
    8 8 │

`groupByNesting`

Groups properties by the shape of their values before sorting by name. Simple values, such as strings, numbers, booleans, null, and single-line arrays or objects, come first. Multi-line arrays and objects, functions, classes, and object methods come afterward. Defaults to false.

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "useSortedKeys": {
6
          "level": "on",
7
          "options": {
8
            "groupByNesting": true
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

1
const obj = {
2
    name: "Sample",
3
    details: {
4
        description: "nested"
5
    },
6
    id: 123
7
};

code-block.js ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1 1 │   const obj = {
    2   │ - ····name:·"Sample",
      2 │ + ····id:·123,·
      3 │ + ····name:·"Sample",
    3 4 │       details: {
    4 5 │           description: "nested"
    5   │ - ····},
    6   │ - ····id:·123
      6 │ + ····}
    7 7 │   };
    8 8 │