How to format JSON in VS Code

Shortcuts to format JSON in VS Code

A comma means a chord: press the first pair, release, then press the second. These are the defaults from the VS Code keyboard reference. If an extension has taken one, right-click in the editor and choose Format Document. The formatter is the built-in JSON Language Features extension, which covers .json files and JSON with Comments.

Format pasted JSON

A new tab is plain text, and plain text has no formatter.

1. Press Ctrl + N (Cmd + N on macOS) and paste the JSON.
2. If the status bar says Plain Text, click it (or press Ctrl + K, M) and choose JSON.
3. Run Format Document.

Skip step 2 and VS Code says There is no formatter for ‘plaintext’ files installed.

Format on save

Run Preferences: Open User Settings (JSON) from the Command Palette and add:

{
  "[json]": {
    "editor.formatOnSave": true
  },
  "[jsonc]": {
    "editor.formatOnSave": true
  }
}

[jsonc] covers JSON with Comments. For every language, put "editor.formatOnSave": true at the top level instead. To share the setting with a team, run Preferences: Open Workspace Settings (JSON), which writes it to .vscode/settings.json.

With "files.autoSave": "afterDelay", VS Code formats only when you save explicitly with Ctrl + S (Cmd + S).

Indentation: 2 spaces, 4 spaces or tabs

VS Code indents with 4 spaces unless it detects something else in the file. Click Spaces: 4 in the status bar to change one file. For 2 spaces in every JSON file:

{
  "[json]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false
  }
}

Without "editor.detectIndentation": false, a file already indented with 4 spaces stays at 4. For tabs, set editor.insertSpaces to false. "json.format.keepLines": true keeps your line breaks and adds none, so an array typed on one line stays as [ 1, 2, 4 ].

Choose the default formatter

With Prettier or another JSON formatter installed, Format Document can stop with There are multiple formatters for ‘JSON’ files. One of them should be configured as default formatter. Click Configure…, or set it yourself:

{
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  }
}

That is the built-in formatter. Use "esbenp.prettier-vscode" if your project formats with Prettier. Format Document With… runs a different formatter once without changing the default.

When Format Document does nothing

Wrong language mode. Plain Text, Log and other modes have no JSON formatter. Check the status bar.

Invalid JSON. The formatter does not refuse broken input. It indents up to the error and leaves the rest, so single-quoted JSON comes out like this:

{'id': 7,'tags': ['a','b'
    ]
}

Open the Problems panel (Ctrl + Shift + M, or Cmd + Shift + M on macOS), fix the first error and format again. The JSON formatter names the line and column of the error and suggests a fix.

Comments in a .json file. Comments are not permitted in JSON. (521) means a file in JSON mode contains // or /* */. Switch it to JSON with Comments or delete them: see Comments are not permitted in JSON, and can JSON have comments for whether the program reading the file will accept them.

Formatter switched off. "json.format.enable": false in your settings disables it.

File over 50 MB. VS Code shows This file cannot be formatted because it is too large. Run jq . big.json > pretty.json instead.

Sort keys

JSON: Sort Document in the Command Palette sorts the keys of every object alphabetically, nested objects included, keeps comments next to their keys, and formats in the same step.

Notepad++ needs a plugin for all of this: see how to format JSON in Notepad++. Other editors and languages are in the JSON guides.