Pretty-Print JSON in VS Code: Format Without Changing Data

Confirm what kind of document you opened

To pretty-print a JSON file in Visual Studio Code, open the file, confirm its language mode is JSON, and run Format Document from the Command Palette or editor context menu. Formatting makes nesting and arrays easier to read. It does not establish that the data meets your application's requirements, and it should not be used as an excuse to change values.

Check the language indicator before diagnosing a formatting failure. A pasted response in an untitled editor may be treated as plain text. A VS Code settings file may use JSON with Comments, usually called JSONC. Those are different input contracts: a comment or trailing comma accepted in a JSONC editing context can still be rejected by a strict API JSON parser.

The official JSON editing documentation describes the built-in formatter and language modes. Start with those built-in features before installing an extension solely to add indentation. Use the command name when a customized keyboard shortcut behaves differently.

Try a fixture with values worth preserving

Save the following synthetic document as an ordinary JSON file. It has a string identifier with leading zeros, a boolean, a zero and a newline escape inside a string. Those details make it more useful than a sample containing only one property.

{"customer":"0017","enabled":false,"attempts":0,"message":"first\nsecond","tags":["blue","green"]}

After formatting, customer should still be the string "0017", enabled should still be false, and attempts should still be numeric zero. The message's encoded newline remains inside its string; it must not become an unescaped literal line break that makes the JSON invalid. The tag order should remain blue followed by green.

Change indentation to the convention your repository uses, then format again. Two spaces, four spaces and a tab are presentation choices. They are not evidence that the underlying payload changed. Keep the repository's existing formatting configuration when the file is part of a shared project.

Resolve syntax errors before applying cosmetic changes

If formatting fails, inspect the editor's diagnostics and the nearby tokens. Common causes include a missing comma between properties, single quotes instead of double quotes, an unclosed string and an extra comma after the last array member. Fix the smallest demonstrated syntax error, then parse or format again; one missing quote can produce several later diagnostics.

Do not remove all backslashes with a search-and-replace. Escapes can represent a quote, a path separator or an intentional control character within a string. Likewise, replacing every occurrence of the text null can damage a string that happens to contain those letters.

The JSON specification defines the accepted syntax. It does not include comments. When exporting from a JSONC configuration to a strict JSON consumer, intentionally produce strict JSON and validate the resulting file with that consumer.

Review the saved result at two levels

Use a text comparison against the saved original to see what the formatter changed. A formatting-only edit should be understandable as whitespace outside strings. If a formatter or extension also sorts keys, removes fields or changes quote escapes, investigate that behavior before committing the result.

For small values safely represented in JavaScript, this independent check confirms the fixture's key values. It illustrates a verification step rather than replacing the editor formatter.

const value = JSON.parse('{"customer":"0017","enabled":false,"attempts":0}');
console.assert(value.customer === "0017");
console.assert(value.enabled === false);
console.assert(value.attempts === 0);

Large numeric identifiers need additional care: a parser using floating-point numbers can round them even if the text looks reasonable. Keep identifiers as strings when that is their actual data contract, and compare original numeric tokens when exact decimal preservation matters.

Use the browser formatter for a small isolated example

The local JSON Pretty tool offers Format, Minify and an indentation choice. Paste the synthetic fixture, inspect the result, and then try a missing closing brace. A failed parse must clear the prior output instead of leaving an apparently current result ready to copy.

For a repository file, return to the editor and save the reviewed version in its original location. Open it again to confirm the saved content, and run the application's existing configuration check before relying on it.

Related guides

Compare JSON in VS Code: Separate Text and Data Differences

Compare two JSON files in VS Code, control formatting noise, and inspect object keys, array order and exact numbers before merging a change.

Visual Studio Code Best Formatter

Use this guide for visual studio code best formatter; it explains the workflow and how to verify syntax, semantics, input data and environment-specific output.

How Format Code In Visual Studio?

Learn how format code in visual studio: practical steps plus final checks for syntax, semantics, input data and environment-specific output.