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 properties of a JS object in natural order.

Natural order means that uppercase letters come before lowercase letters (e.g. A < a < B < b) and numbers are compared in a human way (e.g. 9 < 10).

This rule will consider spread/calculated keys e.g [k]: 1 as non-sortable. Instead, whenever it encounters a non-sortable key, it will sort all the previous sortable keys up until the nearest non-sortable key, if one exist. This prevents breaking the override of certain keys using spread keys.

Sorting the keys of an object technically changes the semantics of the program. It affects the result of operations like Object.getOwnPropertyNames. Since ES2020, operations like for-in loops, Object.keys, and JSON.stringify are guaranteed to process string keys in insertion order.

In cases where the order of such operations is important, you can disable the assist action using 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

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.

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 │

Following will apply the lexicographic sort 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`

When enabled, groups object keys by their value’s nesting depth before sorting alphabetically. Simple values (primitives, single-line arrays, and single-line objects) are sorted first, followed by nested values (multi-line arrays and multi-line objects).

Default: 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:2:5 assist/source/useSortedKeys  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The object properties are not sorted by nesting level and key.
  
    1 │ const obj = {
  > 2 │     name: “Sample”,
      │     ^^^^^^^^^^^^^^^
  > 3 │     details: {
  > 4 │         description: “nested”
  > 5 │     },
  > 6 │     id: 123
      │     ^^^^^^^
    7 │ };
    8 │ 
  
  ℹ Safe fix: Sort the object properties by key.
  
    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 │