useSortedKeys

JSON (and super languages)

Summary

• Rule available since: v1.9.0
• Diagnostic Category: assist/source/useSortedKeys

How to enable in your editor

VS Code

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.action.useSortedKeys.biome": "explicit",
    "source.fixAll.biome": "explicit"
  }
}

Zed

.zed/settings.json

{
  "code_actions_on_format": {
    "source.action.useSortedKeys.biome": true,
    "source.fixAll.biome": true
  }
}

Other editors

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

How to configure

biome.json

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

Description

Sort the keys of a JSON 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).

Examples

{
    "vase": "fancy",
    "nested": {
        "omega": "bar",
        "alpha": "foo"
    }
}

code-block.json ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1 1 │   {
    2   │ - ····“vase”:·“fancy”,
    3   │ - ····“nested”:·{
      2 │ + ····“nested”:·{
    4 3 │           “omega”: “bar”,
    5 4 │           “alpha”: “foo”
    6   │ - ····}
      5 │ + ····},
      6 │ + ····“vase”:·“fancy”
    7 7 │   }
    8 8 │   
  
code-block.json ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    2 2 │       “vase”: “fancy”,
    3 3 │       “nested”: {
    4   │ - ········“omega”:·“bar”,
    5   │ - ········“alpha”:·“foo”
      4 │ + ········“alpha”:·“foo”,
      5 │ + ········“omega”:·“bar”
    6 6 │       }
    7 7 │   }
  

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": {
        "useSortedKeys": {
          "options": {
            "sortOrder": "natural"
          }
        }
      }
    }
  }
}

{
    "val13": 1,
    "val1": 1,
    "val2": 1,
    "val21": 1,
    "val11": 1
}

code-block.json ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1 1 │   {
    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.

biome.json

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

{
    "val13": 1,
    "val1": 1,
    "val2": 1,
    "val21": 1,
    "val11": 1
}

code-block.json ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1 1 │   {
    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

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "useSortedKeys": {
          "options": {
            "groupByNesting": true
          }
        }
      }
    }
  }
}

{
    "name": "Sample",
    "details": {
        "description": "nested"
    },
    "id": 123
}

code-block.json:1:1 assist/source/useSortedKeys  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code
• Test Cases

JavaScript (and super languages)

Summary

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

How to enable in your editor

VS Code

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.action.useSortedKeys.biome": "explicit",
    "source.fixAll.biome": "explicit"
  }
}

Zed

.zed/settings.json

{
  "code_actions_on_format": {
    "source.action.useSortedKeys.biome": true,
    "source.fixAll.biome": true
  }
}

Other editors

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

How to configure

biome.json

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

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

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

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 │   
  

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

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 │   
  

const obj = {
  get aab() {
    return this._aab;
  },
  set aac(v) {
    this._aac = v;
  },
  w: 1,
  x: 1,
  ...g,
  get aaa() {
    return "";
  },
  u: 1,
  v: 1,
  [getProp()]: 2,
  o: 1,
  p: 1,
  q: 1,
}

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": {
        "useSortedKeys": {
          "options": {
            "sortOrder": "natural"
          }
        }
      }
    }
  }
}

const obj = {
    val13: 1,
    val1: 1,
    val2: 1,
    val21: 1,
    val11: 1,
};

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.

biome.json

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

const obj = {
    val13: 1,
    val1: 1,
    val2: 1,
    val21: 1,
    val11: 1,
};

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

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "useSortedKeys": {
          "options": {
            "groupByNesting": true
          }
        }
      }
    }
  }
}

const obj = {
    name: "Sample",
    details: {
        description: "nested"
    },
    id: 123
};

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 │   
  

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code
• Test Cases