How to Format JSON in VS Code: Easy Guide (2026)

Press Shift+Alt+F on Windows or Linux, or Shift+Option+F on Mac, to format JSON in VS Code. Formatting is built in. You do not need a plugin for normal JSON files.

VS Code automatically understands .json files. It highlights syntax, detects errors, folds nested objects and arrays, validates common config files against schemas, and formats JSON with proper indentation. For most developers, the built-in formatter is enough.

If you want JSON to format every time you save, enable editor.formatOnSave. If your team already uses Prettier for JavaScript, TypeScript, CSS, or Markdown, you can use Prettier for JSON too. For sorting keys, minifying JSON, or converting JSON to other formats, install a JSON-specific extension like JSON Tools.

How to Format JSON in VS Code

Open your JSON file in VS Code. Press Shift+Alt+F on Windows/Linux or Shift+Option+F on Mac. That's it.

You can also right-click inside the editor and choose Format Document.

Before formatting:

{"name":"Alex","age":30,"city":"Portland","skills":["Python","SQL","JavaScript"],"settings":{"theme":"dark","notifications":true}}

After formatting:

{
  "name": "Alex",
  "age": 30,
  "city": "Portland",
  "skills": [
    "Python",
    "SQL",
    "JavaScript"
  ],
  "settings": {
    "theme": "dark",
    "notifications": true
  }
}

The formatted version is easier to scan. Nested objects, arrays, and key-value pairs become visible without counting brackets.

VS Code JSON Formatting Shortcuts

If you forget the shortcut, open the Command Palette and search Format Document. VS Code shows the current shortcut beside the command.

Quick Comparison: All Formatting Methods

Most people should start with the built-in formatter. Add Prettier if your project already uses it. Add JSON Tools only if you need JSON-specific actions like sorting keys or minifying.

Enable Format on Save for JSON

Format on save makes VS Code clean up JSON automatically every time you save the file.

Open Settings with Ctrl+, on Windows/Linux or Cmd+, on Mac. Search for format on save. Enable Editor: Format On Save.

Or add this to your VS Code settings:

{
  "editor.formatOnSave": true
}

If you only want format on save for JSON files, use language-specific settings:

{
  "[json]": {
    "editor.formatOnSave": true
  }
}

This keeps formatting automatic for JSON without changing how other file types behave.

Use Prettier to Format JSON in VS Code

VS Code's built-in JSON formatter works well. Prettier is useful when your whole project already uses Prettier and you want one consistent formatter across JSON, JavaScript, TypeScript, CSS, Markdown, and HTML.

Install Prettier:

1. Open Extensions with Ctrl+Shift+X or Cmd+Shift+X
2. Search Prettier - Code formatter
3. Install the extension by Prettier
4. Set it as the default formatter

Add this to settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

For JSON only:

{
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

Prettier respects project config files like .prettierrc. That helps teams keep indentation and formatting consistent.

Built-In Formatter vs Prettier

Use the built-in formatter for quick JSON work. Use Prettier when your repository already has formatting rules or multiple developers touching the same files.

Format JSONC Files with Comments

VS Code supports JSONC, which means JSON with comments. This matters for files like:

• settings.json
• tasks.json
• launch.json
• some tool configuration files

Regular JSON does not allow comments. JSONC does. VS Code understands this difference and can format JSONC files without deleting comments.

Example:

{
  // Editor settings
  "editor.formatOnSave": true,
  "editor.tabSize": 2
}

Not every tool accepts JSONC. A file can format correctly in VS Code and still fail in a strict JSON parser if it contains comments. Use comments only in files that explicitly support JSONC.

Change JSON Indentation in VS Code

Most JSON files use 2 spaces. Some teams prefer 4 spaces.

To change indentation:

1. Open Settings
2. Search tab size
3. Set Editor: Tab Size to 2 or 4
4. Search insert spaces
5. Keep Editor: Insert Spaces enabled
6. Reformat the file with Shift+Alt+F

For JSON only:

{
  "[json]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  }
}

If your project has an .editorconfig file, VS Code may follow that instead. Check the project settings before changing global preferences.

When Format Document Does Not Work

The most common reason: the file is not recognized as JSON.

Look at the bottom-right corner of VS Code. If it says Plain Text, click it and choose JSON. Then press Shift+Alt+F again.

Other causes:

• The file has syntax errors
• Another extension is overriding the formatter
• No default formatter is selected
• The file is too large and VS Code is struggling
• You selected text and ran the wrong command

Use Command Palette -> Format Document With... to choose the formatter manually. If multiple formatters are installed, this tells VS Code exactly which one to use.

When JSON Formatting Fails

VS Code only formats valid JSON. If the file has syntax errors, the formatter may stop or leave the file unchanged.

Common errors:

• Trailing comma: {"name": "Alex",}
• Single quotes: {'name': 'Alex'}
• Missing comma: {"a": 1 "b": 2}
• Unquoted keys: {name: "Alex"}
• Unmatched brackets: {"items": [1, 2}
• Comments in strict JSON: // comment

VS Code shows red squiggles near invalid syntax. Open the Problems panel with Ctrl+Shift+M or Cmd+Shift+M to see the exact error.

Fix the syntax error first, then format again.

Format Only Selected JSON

Sometimes JSON is embedded inside another file: a JavaScript string, an HTML JSON-LD block, or a config snippet inside documentation.

To format only part of a file:

1. Select the JSON text
2. Right-click
3. Choose Format Selection

Shortcut:

This is cleaner than copying JSON into a new tab, formatting it, and pasting it back.

Format JSON from the Command Line

If you have VS Code's code command installed, you can open a JSON file from the terminal:

code data.json

Then format in the editor with Shift+Alt+F.

For true command-line formatting without opening VS Code, use Python:

python -m json.tool input.json output.json

Or use jq:

jq . input.json > output.json

Use command-line tools for automation and batch jobs. Use VS Code for interactive editing.

Batch Formatting Multiple JSON Files

VS Code is not the best tool for formatting hundreds of files at once. Use Python or jq.

PowerShell:

Get-ChildItem *.json | ForEach-Object {
    python -m json.tool $_.FullName temp.json
    Move-Item temp.json $_.FullName -Force
}

Bash:

for file in *.json; do
    python -m json.tool "$file" > temp.json && mv temp.json "$file"
done

These scripts format every .json file in the current folder. Back up important files first or run the script in a copy of the folder.

Formatting Large JSON Files in VS Code

VS Code handles normal JSON files smoothly. Small config files, API responses, and package files format instantly. Large JSON exports are different.

Files above 50MB can become slow. Extremely large files may freeze the editor, disable tokenization, or make formatting impractical. This is not a JSON problem only; any editor struggles when it has to parse and re-render huge structured text.

Better options for large files:

1. Use a JSON splitter to break the file into smaller chunks
2. Use JSON to table if the file is array-based data
3. Use JSON to Excel if you need spreadsheet analysis
4. Use Python or jq for command-line formatting
5. Use a dedicated large-file JSON viewer

If the file is a data export with thousands of objects, formatting the raw text may not be the best view. A table or spreadsheet is usually easier.

Formatting API Responses

Copy the JSON response from your browser DevTools, Postman, Insomnia, or curl output. Open VS Code, create a new file, paste the JSON, then set the language mode to JSON.

Fast workflow:

1. Copy the response body
2. Open a new VS Code tab
3. Paste the JSON
4. Click language mode in the bottom-right
5. Choose JSON
6. Press Shift+Alt+F

If you do this often, save the scratch file as response.json. VS Code will remember JSON mode, and formatting works immediately.

Sorting JSON Keys in VS Code

VS Code can format JSON, but it does not sort keys alphabetically by default.

If you need key sorting, install JSON Tools. It adds commands for prettifying, minifying, and sorting JSON.

Use key sorting when:

• You want cleaner Git diffs
• Multiple people edit the same config file
• You compare generated JSON files
• Your team wants deterministic key order

Do not sort keys if order carries meaning for humans, such as hand-organized config sections.

Minify JSON in VS Code

The built-in formatter makes JSON readable. Minification does the opposite: it removes whitespace and line breaks.

VS Code does not include a first-class JSON minify command. Use JSON Tools, jq, or an online minifier.

With jq:

jq -c . input.json > minified.json

Use minification when you need compact payloads for APIs, logs, or embedded examples. Keep formatted JSON for editing.

VS Code JSON Validation

VS Code validates JSON while you type. Missing commas, extra brackets, and invalid syntax show as red squiggles.

It also supports JSON Schema. Schema validation checks whether your JSON has the expected keys, value types, and allowed values. VS Code automatically applies schemas for common files like package.json and many project config files.

For a custom schema, add a json.schemas setting:

{
  "json.schemas": [
    {
      "fileMatch": ["/config/*.json"],
      "url": "./schemas/app-config.schema.json"
    }
  ]
}

Now VS Code validates matching config files against your schema and provides autocomplete based on allowed properties.

VS Code vs Notepad for JSON Formatting

Use VS Code if JSON is part of your development workflow. Use Notepad++ if you want a fast, lightweight editor for occasional formatting.

Frequently Asked Questions

What is the shortcut to format JSON in VS Code?

Shift+Alt+F on Windows/Linux. Shift+Option+F on Mac. You can also right-click and choose Format Document.

Does VS Code format JSON without extensions?

Yes. VS Code has built-in JSON support, including formatting, syntax highlighting, validation, folding, and schema-aware editing.

How do I auto-format JSON on save in VS Code?

Enable editor.formatOnSave in Settings. For JSON only, add "[json]": { "editor.formatOnSave": true } to settings.json.

Why is Format Document not working?

The file may not be recognized as JSON, the JSON may contain syntax errors, or multiple formatters may be conflicting. Set the language mode to JSON, fix red error markers, then use Format Document With... if needed.

Can VS Code format JSON with comments?

Yes, when the file is treated as JSONC. VS Code settings files and launch/task config files support JSON with comments. Strict JSON files should not contain comments.

Can VS Code sort JSON keys?

Not by default. Install JSON Tools or use a script if you need key sorting.

Can VS Code minify JSON?

Not with the built-in formatter. Use JSON Tools, jq with jq -c . input.json, or another minifier.

What if my JSON file is huge?

VS Code can slow down with very large JSON files. Split the file first with a JSON splitter, inspect it as a table with JSON to table, or use Python/jq from the command line.

Is Prettier better than the built-in VS Code formatter?

Prettier is better for team-wide consistency across many file types. The built-in formatter is enough for quick JSON formatting.

How do I format only selected JSON in VS Code?

Select the JSON text, right-click, and choose Format Selection. Shortcut: Ctrl+K Ctrl+F on Windows/Linux or Cmd+K Cmd+F on Mac.

Related Tools

Need to clean up JSON before or after formatting?

1. JSON Merger - Combine multiple JSON files into one
2. JSON Splitter - Break huge JSON files into smaller chunks
3. JSON to Excel - Convert JSON data into spreadsheet format
4. JSON to Table - Inspect JSON arrays in a table view
5. JSON Flattener - Flatten nested JSON before analysis
6. Best JSON Extensions for VS Code - Add tree views, sorting, minification, and extra JSON tools
7. How to Format JSON in Notepad++ - Format JSON in a lightweight Windows editor