Sort settings in vscode's json-based settings editor

Question

I use vscode's original settings editor ("workbench.settings.editor": "json") because it gives me more control.

The problem is the tree on the left - which contains internal settings and extensions settings - is not sorted in alpha order. It's very hard to use.

On the vscode repo they've indicated they will not fix it because they're focusing on the new UI instead.

There must be a way to sort it. Does anyone know how (other than writing a new extension)?

Answer 1

Yes, we can easily sort the vs code JSON settings using the build in functionality of Sort Document, just open the JSON setting file in editor view and open command palette using shortcut ctrl+shift+p or cmd+shift+p then type sort document (refer below SS) and hit enter.

DEMO:

My VS Code JSON setting

Before sorting document:

{
  "cSpell.userWords": ["esbenp", "Monokai"],
  "#terminal.integrated.profiles.osx#": "bash",
  "chat.editor.fontSize": 11,
  "debug.console.fontSize": 10,
  "settingsSync.ignoredSettings": ["workbench.colorTheme"],
  "workbench.iconTheme": "material-icon-theme",
  "workbench.sideBar.location": "right",
  "workbench.tree.indent": 2,
  "workbench.colorCustomizations": {
    "tab.activeBackground": "#008080"
  },

  "editor.fontSize": 11,
  "editor.guides.bracketPairs": true,
  "editor.cursorBlinking": "expand",
  "editor.minimap.maxColumn": 30,
  "editor.wordWrap": "on",
  "editor.renderWhitespace": "all",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.tabSize": 2,
  "editor.fontFamily": "fira code, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "terminal.integrated.fontSize": 10,
  "markdown.preview.fontSize": 10,
  "scm.inputFontSize": 11,
  "files.autoSave": "afterDelay",
  "tabnine.experimentalAutoImports": true,
  "files.eol": "\n"
}

After sorting document:

{
  "#terminal.integrated.profiles.osx#": "bash",
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "chat.editor.fontSize": 11,
  "cSpell.userWords": ["esbenp", "Monokai", "tabnine"],
  "debug.console.fontSize": 10,
  "editor.cursorBlinking": "expand",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.fontFamily": "fira code, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 11,
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.guides.bracketPairs": true,
  "editor.minimap.maxColumn": 30,
  "editor.renderWhitespace": "all",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.autoSave": "afterDelay",
  "files.eol": "\n",
  "markdown.preview.fontSize": 10,
  "scm.inputFontSize": 11,
  "settingsSync.ignoredSettings": ["workbench.colorTheme"],
  "tabnine.experimentalAutoImports": true,
  "terminal.integrated.fontSize": 10,
  "workbench.colorCustomizations": {
    "tab.activeBackground": "#008080"
  },
  "workbench.iconTheme": "material-icon-theme",
  "workbench.sideBar.location": "right",
  "workbench.tree.indent": 4
}

Thank you.