Format JSON in VS Code: shortcut, settings and fixes

To format JSON in VS Code, open the file and press Shift+Alt+F on Windows, Shift+Option+F on Mac or Ctrl+Shift+I on Linux. That runs Format Document with the JSON formatter VS Code already ships, so you don't need an extension. If the shortcut does nothing, the file is almost always in the wrong language mode or a setting is blocking it.

How to format JSON in VS Code with the built-in formatter

VS Code formats JSON out of the box through the Format Document command. The official JSON docs list the shortcut and the right-click menu entry, and the basic editing guide confirms VS Code has default formatters for JavaScript, TypeScript, JSON, HTML and CSS.

Open the .json file, or paste JSON into a new tab.
Check that the bottom-right corner of the window says JSON.
Press the shortcut for your system, or right-click in the editor and choose Format Document.

System	Format Document	Format Selection
Windows	Shift+Alt+F	Ctrl+K Ctrl+F
Mac	Shift+Option+F	Cmd+K Cmd+F
Linux	Ctrl+Shift+I	Ctrl+K Ctrl+F

Take a one-line API response:

{"id":7,"name":"Ada","tags":["admin","beta"],"active":true}

After Format Document:

{
    "id": 7,
    "name": "Ada",
    "tags": [
        "admin",
        "beta"
    ],
    "active": true
}

Typing "Format Document" into the Command Palette runs the same command.

Format only part of a file

Format Selection formats just the highlighted text. Select the lines and press Ctrl+K Ctrl+F (Cmd+K Cmd+F on Mac). Grab a complete object or array, because a half-selected value won't reflow cleanly.

Why Format Document does nothing on JSON

When Format Document doesn't change a JSON file, one of four things is usually in the way. Check them in this order.

The file is in Plain Text mode

A new untitled tab starts as Plain Text, so pasted JSON has no formatter attached. Running Format Document then shows a message like "There is no formatter for 'plaintext' files installed", as users on the Code with Mosh forum ran into.

Change the language mode. Click the language name on the right of the Status Bar, or run Change Language Mode with Ctrl+K M (Cmd+K M on Mac), as the languages overview describes. Pick JSON and format again. Saving the tab as a .json file also works.

Keep Lines is turned on

The json.format.keepLines setting tells the formatter to "Keep all existing new lines when formatting", according to the JSON extension's setting descriptions. It's off by default. Turn it on and a minified one-line file stays one line, as a Stack Overflow answer points out. Search Settings for "keep lines", untick it and format again.

The built-in JSON formatter is disabled

json.format.enable switches the default JSON formatter on and off. If someone set it to false to hand JSON to another tool and that tool is gone, nothing formats. Set it back to true.

Another formatter has taken over

Make an extension such as Prettier the default formatter and VS Code calls it instead. If that extension is misconfigured or disabled, Format Document quietly fails. Right-click in the file, choose Format Document With..., and pick the built-in JSON formatter. If that works, the extension is the problem.

Change the indentation from 4 spaces to 2

VS Code indents with 4 spaces by default, and the JSON formatter follows the editor's indentation settings. The basic editing guide explains that editor.tabSize and editor.insertSpaces set your default, and that editor.detectIndentation looks at the open file and only checks for 2, 4, 6 or 8 spaces.

That detection is why one file comes out with 2 spaces and another with 4. To force 2 spaces for JSON only, add this to settings.json:

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

The square brackets scope the settings to one language, and the settings docs note that they override your general editor settings. For a one-off change, click the indentation label in the Status Bar.

Format JSON automatically on save

Turning on editor.formatOnSave makes VS Code run the formatter every time you save. If you only want it for JSON, put it inside the same block:

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

editor.formatOnPaste formats what you paste. Not every formatter supports it, since it has to format a range instead of the whole file.

Should you use Prettier for JSON?

Prettier is worth it when a team already uses it for JavaScript and wants JSON to follow the same rules in every editor. The extension is called "Prettier - Code formatter", and its repository says to set it as the default formatter with "editor.defaultFormatter": "esbenp.prettier-vscode". It also respects editor.formatOnSave.

My take: on your own machine, skip it. The built-in formatter handles plain JSON fine, and every extra formatter is one more thing that can silently break Format Document. Add Prettier when there's a shared config to enforce, not before.

Comments and trailing commas in JSON files

Files like settings.json open in a separate JSON with Comments (jsonc) mode, which the JSON docs say allows // and block comments. That mode accepts trailing commas but shows a warning. Formatting works the same in both modes. If you're unsure which dialect a file uses, JSON vs JSON5 vs JSONC lays out the differences, and Can JSON have comments? explains why plain JSON rejects them.

The limit: VS Code's formatter can't repair broken JSON. A missing quote or a stray comma in a .json file shows up as a red squiggle, and the output won't come out right until you fix it by hand. Why JSON doesn't allow trailing commas covers the most common culprit.

When you're not in VS Code

For JSON on a machine without your editor, or a response you just want to read, the private JSON formatter on this site formats in the page with a 2-space indent, and its tool code makes no network requests, so the input isn't uploaded. If you mostly need to open and browse a big file, how to open a JSON file compares the options.

FAQ

What is the shortcut to format JSON in VS Code?

Shift+Alt+F on Windows, Shift+Option+F on Mac and Ctrl+Shift+I on Linux. It runs Format Document, which you can also pick from the right-click menu.

Do I need an extension to format JSON in VS Code?

No. VS Code ships a default formatter for JSON, along with JavaScript, TypeScript, HTML and CSS. Prettier is optional, mainly useful when a team wants one style across editors.

Why does Format Document do nothing on my JSON?

Usually the file is in Plain Text mode, the json.format.keepLines setting is on and keeps minified JSON on one line, or the built-in JSON formatter was disabled with json.format.enable.

How do I format JSON automatically when I save?

Turn on editor.formatOnSave, either globally or only for JSON inside a "[json]" block in settings.json.

How do I format JSON in VS Code?