How to Format JSON in VS Code — Shortcuts, Settings & Tips (2026)

VS Code is the most widely-used editor for JavaScript developers and one of the best JSON editors around — and you don't need a single extension to use it well. This guide walks through every formatting workflow worth knowing, from the built-in shortcuts you'll use a hundred times a day to the harder problem of editing files that don't fit in memory.

The built-in shortcut

VS Code formats JSON natively. Open any .json file and press:

• macOS: Shift + Option + F
• Windows / Linux: Shift + Alt + F

That's it. The file is reformatted with two-space indentation by default. No extension required.

Under the hood VS Code is calling its built-in JSON language service, which uses the same parser the editor uses for syntax highlighting and IntelliSense. The output is byte-identical to what JSON.stringify(JSON.parse(content), null, 2) would produce in Node.

Format on save

To format every JSON file automatically when you save:

1. Open settings: Cmd + , (macOS) or Ctrl + , (Windows/Linux)
2. Search for Format On Save
3. Tick the box

That's the GUI way. For more control, edit your settings.json directly (Cmd/Ctrl + Shift + P → "Open User Settings (JSON)"):

{
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  }
}

Two things to notice. The settings are scoped with [json] and [jsonc] — that way formatting JSON doesn't affect how your TypeScript or Python files are formatted. And JSONC (JSON with Comments) is configured separately because some projects use comments in config files like tsconfig.json or .vscode/settings.json.

If you also use Prettier as your project's default formatter, replace "vscode.json-language-features" with "esbenp.prettier-vscode". Prettier offers more configuration (line width, trailing comma style, quote style) and applies the same rules to JSON as to your other source files.

Format on paste

This is the one most developers miss. Add:

{ "editor.formatOnPaste": true }

Now every time you paste minified JSON from a curl response or a log line, VS Code pretty-prints it instantly. This single setting saves hours over the course of a project.

You can also scope it to JSON only:

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

Format a selection

If you only want to reformat part of a file — say, one chunk of a larger document — select the text and use:

• macOS: Cmd + K then Cmd + F
• Windows / Linux: Ctrl + K then Ctrl + F

Useful when you have a JSON snippet embedded inside a Markdown file, a SQL query, or a test fixture.

Sort keys (with an extension)

VS Code's built-in formatter preserves key order. For deterministic output — or just easier diffs — you often want keys alphabetically sorted. Two options:

1. Sort JSON objects by vue-toolsmiths — adds a "Sort JSON" command to the palette.
2. jq in a terminal: jq -S . input.json > sorted.json. -S sorts keys recursively.

The second is more reliable for large files and is worth installing regardless — it's one of those tools you'll find a reason to use weekly.

JSON with Comments (JSONC)

Some configuration files in the JavaScript ecosystem allow comments:

• .vscode/settings.json
• tsconfig.json
• .devcontainer/devcontainer.json

These are JSONC, not strict JSON. VS Code recognises them automatically by filename and won't complain about the comments. But if you copy a JSONC file into a context that expects strict JSON (an API request body, a JSON.parse call), you'll get a syntax error.

To strip comments programmatically:

# Using node
node -e "console.log(JSON.stringify(require('jsonc-parser').parse(require('fs').readFileSync('config.json','utf8')), null, 2))"

# Using jq with jq-1.7
jq 'walk(if type == "string" then sub("^//.*$"; "") else . end)' config.json

For a one-off, the JSONNeat validator will tell you exactly where the comments are so you can delete them by hand.

Working with very large JSON files

VS Code's editor is excellent up to ~50 MB. Past that, it slows down. Past ~200 MB, it can refuse to open the file outright. For multi-hundred-MB or gigabyte JSON, you need different tooling:

1. Disable language features for the file. Cmd/Ctrl + Shift + P → "Change Language Mode" → "Plain Text". This stops VS Code from parsing the file for IntelliSense, fold ranges and validation. The file becomes a regular text buffer, which most editors can handle even at very large sizes.

2. Use a streaming command-line tool. jq reads JSON as a token stream and doesn't need to load the whole document:

# Pretty-print
jq . huge.json > pretty.json

# Extract just one field
jq '.users[].email' huge.json

# Filter
jq 'select(.active)' huge.json

For genuinely streaming use, jq has a --stream mode that emits events as it parses, never holding the whole document in memory.

3. Use a structural viewer. Tools like fx (terminal) or DataGrip / TablePlus (GUI, for JSON columns in databases) give you a navigable tree view of arbitrarily large JSON.

4. Use JSONNeat in your browser. Our formatter handles multi-megabyte files smoothly without the editor overhead VS Code adds. For one-off formatting of a 10-100 MB file, this is often the fastest path.

Useful JSON extensions

VS Code is good out of the box but a handful of extensions are worth the install:

• Paste JSON as Code (quicktype) — paste any JSON sample and get a generated TypeScript / Go / Rust / Swift type. Saves the tedious work of typing out interfaces.
• JSON Tools (eriklynd) — minify, escape, sort keys, and convert to YAML or XML from the command palette.
• JSON Crack — visualise JSON as an interactive graph. Surprisingly useful for understanding deeply nested API responses.
• Rainbow Brackets — colour-codes matched brackets, which makes deeply nested JSON readable at a glance.
• Even Better TOML — if your project mixes JSON and TOML, this gives TOML the same treatment.

A common mistake is installing five "JSON" extensions that all try to format the file and fighting over which one wins. Keep one formatter active per language; let it do the job.

Keyboard shortcuts cheat sheet

| Action | macOS | Windows / Linux |

|---|---|---|

| Format document | Shift+Option+F | Shift+Alt+F |

| Format selection | Cmd+K Cmd+F | Ctrl+K Ctrl+F |

| Fold all | Cmd+K Cmd+0 | Ctrl+K Ctrl+0 |

| Unfold all | Cmd+K Cmd+J | Ctrl+K Ctrl+J |

| Fold one level | Cmd+K Cmd+1..7 | Ctrl+K Ctrl+1..7 |

| Find in file | Cmd+F | Ctrl+F |

| Go to symbol | Cmd+Shift+O | Ctrl+Shift+O |

| Open command palette | Cmd+Shift+P | Ctrl+Shift+P |

The fold commands are underused. Cmd+K Cmd+1 collapses every top-level object value, giving you a one-screen overview of even a long document. Drill in with Cmd+K Cmd+2, Cmd+K Cmd+3 to expand deeper levels one at a time. This is the fastest way to read an unfamiliar API response.

When VS Code can't help: invalid JSON

If your file has syntax errors, VS Code's formatter refuses to run. You'll see "There is no formatter for 'json' files installed" or simply nothing will happen. The cause is almost always that the document is unparseable, not that the formatter is missing.

To find the error:

1. Look at the Problems panel (Cmd/Ctrl + Shift + M). VS Code's JSON validator reports syntax errors there with line numbers.
2. If the file is too large for the validator, paste a representative chunk into the JSONNeat validator — it'll point to the exact line and column.
3. Common culprits are trailing commas, unquoted keys, and curly quotes from a recent paste. See our common JSON errors guide for the full list.

JSON schema-aware editing

The under-appreciated feature of VS Code's JSON support is schema integration. When VS Code knows the schema for a file (package.json, tsconfig.json, and most well-known config files have schemas registered automatically), you get:

• IntelliSense suggestions for valid keys
• Inline documentation for each field
• Real-time validation of values
• Auto-completion of enum values

For your own JSON files, register a schema in settings.json:

{
  "json.schemas": [
    {
      "fileMatch": ["myapp.config.json"],
      "url": "./schemas/config.schema.json"
    }
  ]
}

Now myapp.config.json files get the same intelligent editing as built-in configs. See our JSON Schema tutorial for how to write the schema.

The workflow that scales

Most JSON editing in VS Code falls into a pattern:

1. Open or paste the JSON.
2. Shift+Option+F (or rely on format-on-paste) to pretty-print.
3. Cmd+K Cmd+1 to collapse and skim the structure.
4. Expand, edit, save (auto-formatted by format-on-save).
5. If parsing fails downstream, paste into the JSONNeat validator to find the syntax error.

Five steps, three of them keyboard shortcuts. Get into the habit and you'll never reach for an online formatter for files smaller than ~50 MB again. For everything bigger, JSONNeat or jq is the answer.