Format JSON in VS Code, and What to Do When It Fails

VS Code ships with a built-in JSON language server that provides formatting, validation, autocompletion, and hover documentation for JSON files. The formatter is triggered by the Format Document command (Shift+Alt+F on Windows and Linux, Shift+Option+F on macOS) or automatically when the editor.formatOnSave setting is enabled. However, the VS Code JSON formatter requires the file to be syntactically valid before it will produce output. If the file contains a syntax error, the formatter returns early and leaves the document unchanged. The editor may show a red squiggle at or near the error position, but the associated error message is sometimes as unhelpful as "Expected comma" without indicating which expected comma at which location.

The VS Code JSON language server is built on the vscode-json-languageservice npm package, which uses the jsonc-parser library internally. This parser accepts JSONC (JSON with Comments), which is why files with a .jsonc extension and VS Code's own settings.json and extensions.json can contain // single-line and /* */ block comments. Pure .json files are validated more strictly against the RFC 8259 standard. When you run Format Document and nothing happens, the most likely cause is a syntax error that the language server has detected but has not surfaced prominently in the editor UI. The Problems panel accessible via View > Problems lists all detected errors with file name, line number, and a text description, and is more informative than the editor squiggle alone.

Pasting the JSON into FixTools is the fastest way to identify and fix the exact syntax error before returning to VS Code. FixTools uses the browser's native JSON.parse(), which is RFC 8259-compliant and reports the exact character position of the first error it encounters. The error message from the browser's JSON parser is often more precise than the one VS Code surfaces in its Problems panel, because it reports the character the parser actually encountered rather than the character it was waiting for. Once you fix the error and copy the formatted output back into VS Code, the file is valid and VS Code's own formatter and language server features will work normally for all subsequent edits.

VS Code users hit a recurring confusion around JSON5 and JSONC. The editor recognises three flavors: strict .json files which forbid comments and trailing commas, .jsonc files which allow both, and JSON5 files which require the vscode-json5 extension to handle the wider grammar including unquoted keys and single-quoted strings. Default settings.json, keybindings.json, and tsconfig.json are treated as JSONC by file association rules in VS Code's package.json. If you copy a tsconfig.json into a tool that does not understand JSONC, including FixTools or a build script that uses strict JSON.parse, the comments will trigger errors. Strip them with a JSONC preprocessor such as the jsonc-parser npm package, or rename the file to .jsonc and accept that downstream tooling needs JSONC support.

VS Code's built-in JSON formatter and Prettier behave differently enough on edge cases to be worth distinguishing. The built-in formatter uses your editor.tabSize and editor.insertSpaces settings, applies them globally to all JSON files in the workspace, and runs synchronously on Format Document. Prettier reads its own .prettierrc and ignores VS Code editor settings, runs asynchronously through the VS Code Prettier extension or via a pre-commit hook, and handles a broader range of file types with one shared configuration. For team consistency, Prettier wins because the .prettierrc lives in the repository and applies identically across every developer's machine regardless of their individual editor preferences. For a single-developer hobby project, the built-in formatter is sufficient and avoids the dependency on a Node-based formatter binary.