How to Format JSON in VS Code

VS Code formats JSON automatically when you save a file or run the Format Document command (Shift+Alt+F on Windows/Linux, Shift+Option+F on macOS). For larger files that cause the editor to stutter, use a dedicated formatting tool that processes data in-memory without blocking the UI thread. This guide covers native VS Code settings, keyboard shortcuts, and strategies for handling heavy JSON payloads efficiently.

Why Default JSON Formatting Can Lag

VS Code uses its built-in formatter to handle JSON files, which works well for small configuration files like package.json or tsconfig.json. However, when you paste a large API response—say, 5 MB of nested objects—the editor attempts to parse, tokenize, and re-render the entire structure in the DOM simultaneously. This synchronous operation can freeze the interface for several seconds, especially if syntax highlighting and folding calculations are enabled. The lag isn't about the size of the file alone; it's about how many nodes the editor must traverse to apply indentation rules. If you are working with microservice responses or log dumps, this delay disrupts your workflow more than the formatting itself does.

Using VS Code Built-in Commands

The fastest way to format JSON inside VS Code is through keyboard shortcuts, which trigger the built-in formatter immediately. You do not need to install extensions for basic pretty-printing. Here are the default bindings:

To ensure JSON files are formatted automatically when you save, add this block to your settings.json file:

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

This configuration tells VS Code to use its native JSON language support whenever you save a .json file. If you prefer manual control, disable formatOnSave and rely on the shortcut keys. The native formatter respects standard indentation rules (usually two spaces) and adds a trailing newline by default. It does not reorder keys unless you explicitly enable sorting, which can be useful for comparing configuration files but often unnecessary for API responses.

Handling Large JSON Payloads Efficiently

When dealing with payloads larger than 1 MB, VS Code’s rendering engine struggles because it tries to calculate line numbers, fold ranges, and syntax colors for every line at once. Instead of forcing the editor to handle this, consider processing the JSON outside the editor first. A practical workflow involves copying the raw JSON into a lightweight formatter that outputs a clean string, then pasting that result back into VS Code. This separates the parsing cost from the rendering cost.

If you must stay inside VS Code, increase the editor.maxTokenizationLineLength setting. This allows longer lines to be tokenized, preventing them from appearing unstyled or grayed out. Add this to your settings:

{
  "editor.maxTokenizationLineLength": 20000
}

{
  "editor.maxTokenizationLineLength": 20000
}

This allows the editor to skip complex syntax highlighting for very long lines, reducing the initial render time. However, this is a compromise: you lose color coding on those lines. For most developers, a hybrid approach works best—use VS Code for editing small configs and a dedicated browser-based tool for initial cleanup of large API dumps.

Validating and Formatting with JSONForge

For JSON payloads that exceed what VS Code handles smoothly, JSONForge provides a specialized environment optimized for speed. Unlike general-purpose text editors, JSONForge processes multi-megabyte files by keeping the logic lightweight and client-side. It pretty-prints or minifies JSON without freezing the tab, offering features like line numbers and fold-by-key views that remain responsive even with deep nesting.

Consider a realistic scenario: you receive a 5 MB JSON response from an API endpoint. It arrives as a single minified line. In VS Code, pasting this might cause a noticeable pause as the editor tries to break lines and apply colors. In JSONForge, you paste the same blob, and the tool instantly breaks it into readable lines with indentation. You can then use the fold-by-key feature to collapse large arrays or objects, making it easier to spot specific fields. Once formatted, you copy the clean output back into VS Code for editing. Because the heavy lifting was done outside the editor, VS Code only needs to render already-formatted text, which is significantly faster.

JSONForge also includes validation against JSON Schema. If you are integrating with a backend that expects strict structure, you can paste both your schema and your payload. The tool highlights missing fields or type mismatches directly in the output. This is faster than writing a script to validate the JSON because the interface shows errors inline, next to the relevant data points. Since everything runs in your browser, your data never leaves your machine unless you explicitly save it, which is critical for handling sensitive internal logs or proprietary API responses.

Best Practices for Clean JSON Output

Consistent formatting makes JSON easier to read and diff. Follow these rules to maintain clarity:

• Use two spaces for indentation. This is the industry standard for JSON and ensures compatibility with most linters and CI pipelines. Avoid tabs, as they can render inconsistently across different terminals and editors.
• Keep keys alphabetical. If you are comparing two JSON files, sorting keys alphabetically makes diffs much clearer. Most formatters, including VS Code’s, offer a "sort keys" option. Enable it if you frequently compare configurations.
• Avoid trailing commas. While some parsers accept them, strict JSON specifications do not. Removing trailing commas prevents subtle bugs in older browsers or strict JSON parsers.
• Minify only for storage. Keep your source JSON files pretty-printed for readability. Minify them only when sending them over the network or storing them in databases where byte size matters.

When you combine VS Code’s native shortcuts for small files with a specialized tool for large payloads, you eliminate the friction of waiting for the editor to catch up. This workflow keeps your focus on the data structure rather than the tool’s performance.