How to Validate and Debug JSON in VS Code

JSON validation is the process of checking whether a JSON string is syntactically correct and, optionally, whether it conforms to a specific schema. VS Code handles both out of the box — most developers just don't know how to use what's already there.

This post covers VS Code's built-in JSON features, schema validation with JSON Schema, debugging common errors, and the extensions worth installing when the built-in tools aren't enough. If you're spending more than thirty seconds hunting for a missing comma, something in your workflow is broken.

What does VS Code do with JSON files by default?

VS Code ships with a JSON language service that activates automatically for any .json file. It gives you syntax highlighting, bracket matching, folding, formatting (Shift+Alt+F on Windows, Shift+Option+F on Mac), and — most importantly — red squiggly underlines when your JSON is invalid.

The language service catches the errors that trip people up most often:

• Trailing commas after the last property ({"name": "test",})
• Single quotes instead of double quotes ({'name': 'test'})
• Unquoted property names ({name: "test"})
• Missing colons or commas between key-value pairs
• Comments in strict .json files (comments are allowed in .jsonc)

You don't need to install anything. Open a .json file, introduce a syntax error, and VS Code underlines it immediately. Hover over the red squiggle to read the diagnostic message.

One thing to know: VS Code's Problems panel (Ctrl+Shift+M) aggregates all diagnostics across open files. If you have ten JSON files open and three have errors, you can see every issue in one place without switching tabs.

How do you validate JSON against a schema in VS Code?

JSON Schema validation is where VS Code goes from "syntax checker" to "actual validator." A JSON Schema defines the structure your data should follow — required fields, allowed types, value constraints, enum restrictions — and VS Code checks your file against it in real time.

VS Code already knows schemas for hundreds of common files. Open a package.json, tsconfig.json, eslintrc.json, or .prettierrc and you get autocomplete and validation without any setup. That's because VS Code pulls schemas from SchemaStore.org, a community-maintained registry of over 800 JSON schemas.

For your own schemas, add a $schema property at the top of your JSON file:

{
  "$schema": "https://example.com/my-config-schema.json",
  "database": {
    "host": "localhost",
    "port": 5432
  }
}

Or map schemas to file patterns in your VS Code settings (settings.json):

{
  "json.schemas": [
    {
      "fileMatch": ["*.config.json"],
      "url": "./schemas/config-schema.json"
    },
    {
      "fileMatch": ["api-response-*.json"],
      "schema": {
        "type": "object",
        "required": ["status", "data"],
        "properties": {
          "status": { "type": "integer" },
          "data": { "type": "object" }
        }
      }
    }
  ]
}

The second example shows an inline schema — useful when you don't want to maintain a separate file. VS Code validates against it the moment you save.

Schema validation catches the mistakes that syntax checking can't: a port field set to "5432" (string) when the schema expects an integer, a missing required field, or an enum value that isn't in the allowed list.

What are the most common JSON errors and how do you fix them?

JSON errors fall into two categories: syntax errors (the parser can't read it) and structural errors (the parser reads it fine, but the data is wrong for its context). VS Code catches syntax errors automatically. Structural errors need a schema.

Here are the ones I see constantly:

Trailing commas. JavaScript allows them. JSON does not. This is the single most common JSON error in the wild.

{
  "users": [
    { "name": "Alice" },
    { "name": "Bob" },
  ]
}

VS Code flags this immediately. The fix is obvious — remove the comma after the last element. If you're generating JSON from code, check your serializer. Python's json.dumps() never produces trailing commas, but hand-rolled string concatenation often does.

Single quotes. JSON requires double quotes for both keys and string values. No exceptions. JavaScript objects accept single quotes; JSON does not.

Unescaped special characters. Backslashes, double quotes, tabs, and newlines inside string values must be escaped: \\, \", \t, \n. Pasting raw file paths from Windows (C:\Users\name) into JSON breaks things because \U and \n are interpreted as escape sequences.

BOM (Byte Order Mark). Some editors prepend an invisible U+FEFF character to UTF-8 files. JSON parsers choke on it. If your file looks correct but won't parse, check for a BOM. In VS Code, look at the status bar — it shows the encoding. Click it and select "Save with Encoding" → "UTF-8" (without BOM).

Number edge cases. JSON doesn't support NaN, Infinity, -Infinity, hex numbers (0xFF), or leading zeros (007). If you're dumping data from Python or JavaScript, these values can slip through. Python's json.dumps() raises ValueError on NaN by default, but json.dumps(float('nan')) does not in some configurations.

Which VS Code extensions actually help with JSON?

Extensions worth installing — and the ones that aren't worth the install size.

Prettier (esbenp.prettier-vscode) formats JSON on save with consistent indentation, trailing newline, and sorted keys if you want them. It's not JSON-specific, but it handles JSON well. Set "editor.defaultFormatter": "esbenp.prettier-vscode" and "editor.formatOnSave": true for your JSON files.

JSON Validate (rioj7.vscode-json-validate) validates JSON embedded inside other files — like JSON strings inside YAML, Markdown, or log files. The built-in JSON service only works on .json and .jsonc files, so this fills a real gap.

Sourcemeta Studio (sourcemeta.studio) is a dedicated JSON Schema extension that adds linting, formatting, and meta-schema validation. If you're writing or maintaining JSON Schemas themselves (not just files validated by schemas), this is useful.

JSON Crack doesn't exist as a VS Code extension, but the web app visualizes JSON as an interactive graph. Useful for navigating deeply nested API responses that are painful to read as text.

You don't need a dedicated "JSON formatter" extension. VS Code's built-in formatter (Shift+Alt+F) handles indentation and structure. If you want more control over formatting rules, Prettier covers it.

How do you debug JSON in API responses?

API debugging is where raw JSON gets messy. You get a 500-line response from a REST endpoint and need to find one nested value or figure out why your frontend is failing.

Step 1: Get the JSON into VS Code. If you're using curl, pipe it to jq for formatting, then redirect to a file:

curl -s https://api.example.com/users | jq '.' > response.json

Or skip jq and use VS Code's formatter. Save the raw response to a .json file, open it, and press Shift+Alt+F.

Step 2: Use folding to navigate. Click the arrows in the gutter to collapse sections. Ctrl+K Ctrl+0 folds everything to the top level. Ctrl+K Ctrl+J unfolds everything. This is the fastest way to understand the shape of an unfamiliar response.

Step 3: Search with context. Ctrl+F finds text, but Ctrl+Shift+O (Go to Symbol) lets you jump to any key in the JSON by name. Type the key you're looking for and VS Code scrolls right to it. This works on files with thousands of lines.

Step 4: Validate against your expected schema. If you have a schema for the API response, map it in settings.json using the json.schemas config shown earlier. VS Code will highlight every field that doesn't match what you expect.

For quick one-off validation without writing a schema, paste your JSON into an online JSON formatter that highlights errors and lets you collapse/expand nodes. Sometimes a browser tab is faster than configuring VS Code for a file you'll look at once.

Can you use JSON with comments in VS Code?

VS Code supports a "JSON with Comments" mode (.jsonc) that allows // single-line and /* */ block comments. Files like settings.json, launch.json, tasks.json, and tsconfig.json use this format by default.

If you have a regular .json file where you want to add comments, you have two options:

1. Rename it to .jsonc
2. Add "files.associations": { "*.json": "jsonc" } to your VS Code settings (this treats all .json files as JSONC, which suppresses trailing-comma and comment errors globally — probably not what you want)

A better approach for config files you control: use .jsonc for human-edited files and .json for machine-generated ones. This keeps the distinction clear.

Note that JSONC is a VS Code convention, not a formal standard. JSON5, a different spec, also supports comments plus trailing commas, unquoted keys, and other relaxed rules. Node.js doesn't parse either format natively — you need a library like json5 or jsonc-parser (which VS Code itself uses internally).

What about very large JSON files?

VS Code starts to struggle with JSON files over 10-20 MB. Syntax highlighting slows down, formatting takes seconds instead of milliseconds, and the language service may stop providing diagnostics entirely.

For large files, use jq on the command line:

# Validate syntax
jq empty large-file.json

# Extract a specific path
jq '.data.users[0].name' large-file.json

# Pretty-print to a new file
jq '.' large-file.json > formatted.json

jq handles files in the hundreds of megabytes without breaking a sweat. It's a streaming parser, so memory usage stays low.

Python's json.tool module works too:

python3 -m json.tool large-file.json > /dev/null

If it exits cleanly, the JSON is valid. If not, it prints the error with a line number.

For browser-based validation of moderately large files (under 5 MB), the UmbraTools JSON Formatter handles formatting and syntax checking without uploading your data anywhere — everything runs client-side.

Quick reference

Task	How	Shortcut / command
Format JSON	Built-in formatter	Shift+Alt+F
See all errors	Problems panel	Ctrl+Shift+M
Jump to key	Go to Symbol	Ctrl+Shift+O
Fold all	Fold All	Ctrl+K Ctrl+0
Unfold all	Unfold All	Ctrl+K Ctrl+J
Schema validation	$schema property or json.schemas in settings	—
Validate syntax (CLI)	jq empty file.json	—
JSONC mode	Rename to .jsonc or set file association	—
Format on save	Prettier + editor.formatOnSave: true	—
Large file validation	jq empty or python3 -m json.tool	—

VS Code's JSON support is good enough for 90% of what you need. Set up schema validation for your project's config files, learn the keyboard shortcuts, and reach for jq when files get big. If you need a quick format-and-validate without opening an editor, try the JSON Formatter.