Formatting a JSON file in VS Code takes one shortcut — Shift+Alt+F on Windows or Linux, or Shift+Option+F on macOS — and the editor's built-in formatter pretty-prints the active file in place, respecting your project's tab size and spaces-or-tabs setting. That single command handles the majority of everyday files, from a tidy package.json to a minified API response pasted into a scratch buffer. Where it falls short is the messy middle ground: a private response you don't want to commit, a one-character syntax error that VS Code only underlines with a vague red squiggle, or a payload you need to minify before shipping it to a mobile client. For those cases, a browser-based JSON Formatter gives you a faster, more transparent workflow: paste the raw text, pick 2-space, 4-space, or tab indent, and click Format to see a pretty-printed tree you can copy back into VS Code. Because the parser is the JavaScript engine's native JSON.parse — ECMA-404 and RFC 8259 compliant — the output is always standards-valid, and because the work runs entirely client-side, your payload never leaves the page even if it carries tokens or credentials.
Use VS Code's Built-In Formatter First
Most developers reach for VS Code's built-in formatter before anything else, because it sits two keystrokes away and uses the same JSON language server that powers IntelliSense. To trigger it, open the JSON file, place your cursor anywhere, and press Shift+Alt+F (Windows/Linux) or Shift+Option+F (macOS). The document reformats in place using the editor's current indentation settings — editor.tabSize and editor.insertSpaces — which it reads from your user or workspace settings.json. If you'd rather pick the command from a menu, open the Command Palette with Ctrl+Shift+P (or Cmd+Shift+P) and run Format Document.
For files with the .jsonc extension — JSON with Comments, used by tsconfig.json, jsconfig.json, and many VS Code workspace files — the same shortcut still works because the editor treats the document as JSON-like for formatting purposes. The formatter also runs automatically when you save a file if editor.formatOnSave is enabled, which most teams turn on through a shared .editorconfig or workspace setting. When VS Code's formatter refuses to run, the cause is almost always an underlying parse error: a trailing comma, a single-quoted key, or an unescaped backslash inside a string. The red squiggle tells you the region, but the message is rarely exact about the column — and that's the gap a browser-based validator fills.
Open the Same File in a Browser JSON Formatter
When the VS Code shortcut is not enough — a syntax error you want pinpointed, a private payload you don't want to commit, or a minified blob you need to read before editing — paste the file's raw text into a browser-based JSON Formatter instead. The workflow has three concrete steps.
- Paste or type your JSON into the input box. If the JSON came from curl or a network panel, copy the raw body without trying to clean it up first — the formatter will handle the rest.
- Pick an indent style — 2 spaces, 4 spaces, or Tab — then click Format to beautify the document into a tree you can scroll, or click Minify to compress it to a single line.
- Read the error or copy the result. If the JSON is invalid, read the line and column reported in the error message; otherwise copy the formatted or minified result with the Copy button and paste it back into VS Code.
Because parsing runs through the JavaScript engine's native JSON.parse, the output is canonical: the structure and values come back exactly as they went in, only the whitespace changes. The same is true for minifying — every space and newline is stripped, but the data round-trips through JSON.stringify and stays standards-compliant. You can paste the minified result back into VS Code, save it as a .json file, or hand it off as an API payload without worrying that the act of formatting has altered the content.
Format vs Minify: When Each One Helps
Format and minify are the same operation running in opposite directions. Format (also called beautify or pretty-print) adds newlines and indentation so nested objects and arrays become readable; minify strips every space and newline to produce the smallest valid payload. Both keep the exact same data — only the whitespace differs.
| Use case | Reach for Format | Reach for Minify |
|---|---|---|
| Debugging an API response | Yes — turns a 5,000-character single-line blob into a browsable tree | No |
| Cleaning up a config file before commit | Yes — matches your team's style | No |
| Shipping JSON over the network | No | Yes — cuts payload size before gzip |
| Embedding JSON in a URL or database field | No | Yes — strips indentation and newlines |
| Reading a file someone else minified | Yes — first step before editing | No |
The indent choice matters too. If a key sits six levels deep, switching from 2-space to 4-space indent adds 6 × (4 − 2) = 12 characters per key — a small difference for one key, but it adds up across a large config. Pick the indent that matches the surrounding codebase so a diff stays clean.
The size reduction from minifying is real but not free. Stripping indentation and newlines from a typical formatted payload reduces its character count noticeably before gzip, which matters for mobile clients and metered bandwidth. For step-by-step guidance on minifying inside VS Code without breaking large integers, see this guide to minifying JSON in VS Code.
Common JSON Errors the Formatter Catches
The biggest advantage of a browser-based formatter is the precise error report. When JSON won't parse, VS Code shows a red squiggle and a general region, but a formatter that uses JSON.parse directly reports the line and column of the first failure. The mistakes that show up most often look like this:
| Mistake | Why JSON rejects it | Fix |
|---|---|---|
| Trailing comma after the last item | Valid in JavaScript, illegal in JSON | Delete the comma |
| Single quotes around strings or keys | JSON requires double quotes | Replace with " |
| Unquoted object keys | Keys must be strings | Wrap the key in " |
| Comments (// or /* */) | JSON spec allows none | Remove the comments, or rename to .jsonc |
If you've ever pasted a config that "looks fine" but the app rejects it, one of these is almost always the cause. The line-and-column pinpoint the formatter provides turns a five-minute hunt into a two-second fix.
Why a Browser Formatter Complements VS Code
VS Code's built-in formatter is fast and always available, but a browser-based formatter earns its place for three concrete reasons. First, validation is sharper: the line-and-column error report beats a vague red squiggle every time, especially when the offending character is a trailing comma on a 2,000-line file. Second, the work happens entirely client-side. Parsing and serialization use the JavaScript engine's native JSON.parse and JSON.stringify, which means your JSON never leaves the page. That is a real difference from online tools that POST your data to a backend, and it makes it safe to format private API responses, access tokens, or production config without uploading anything.
Third, you get both directions in one place. The same tool beautifies with 2-space, 4-space, or tab indent and minifies to a single line, so you don't need a separate minifier to ship a payload. For typical uses — debugging a response, cleaning up package.json, shrinking a payload before storage, or simply checking whether a blob is valid JSON at all before you feed it to code — a browser formatter handles all three in one pass.
JSON Rules Worth Memorizing
A few JSON rules trip developers up because JavaScript is more forgiving than the spec. The browser-based JSON Formatter enforces all of them, but knowing them up front turns most "why won't this parse" moments into a two-second fix.
JSON keys must be double-quoted strings — JavaScript object literals allow bare identifiers, but JSON does not. JSON has exactly six value types — object, array, string, number, boolean, and null — with no undefined, no NaN, no Infinity, no dates, and no functions. Strings must use double quotes and escape control characters, and the whole document must be a single top-level value (an object, an array, a string, a number, a boolean, or null) — not a bare expression or comma-separated list.
One limitation worth knowing is not a bug in the tool but a property of JavaScript itself: numbers are parsed as IEEE-754 doubles, so any integer larger than 9,007,199,254,740,991 (Number.MAX_SAFE_INTEGER) loses precision. A value like 12345678901234567890 comes back as 12345678901234567000. If you need exact large integers — Twitter/X snowflake IDs, 64-bit database keys — keep them as strings in your JSON so the parser preserves them bit-for-bit.