How to Format JSON in VS Code: Shortcuts & Prettify (2026)

Press Shift+Alt+F on Windows or Linux, or Shift+Option+F on Mac, to format JSON in VS Code. This keyboard shortcut instantly prettifies your JSON with proper indentation. No extension needed. VS Code's built-in JSON formatter handles it.

VS Code automatically recognizes .json files. It highlights syntax, catches errors as you type, folds nested objects and arrays, validates config files against schemas, and beautifies JSON with clean indentation. For most developers, the built-in formatter is all you need to make messy JSON readable.

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. Your JSON is formatted instantly.

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

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 prettified version is much easier to scan. Nested objects, arrays, and key-value pairs become visible at a glance without counting brackets.

JSON Formatting Shortcuts for VS Code

If you forget the shortcut, open the Command Palette and search Format Document. VS Code shows the current keybinding beside each command, so you can quickly remind yourself.

Format JSON in VS Code on Mac

If you're on a Mac, the keyboard shortcut to format JSON in VS Code is Shift+Option+F. This works exactly like Shift+Alt+F on Windows and Linux. It prettifies the entire JSON document in one step.

Here's a quick walkthrough for Mac users:

1. Open your .json file in VS Code
2. Press Shift+Option+F to beautify the JSON
3. If that doesn't work, press Cmd+Shift+P to open the Command Palette and type Format Document

To enable auto-formatting on save so your JSON is always prettified when you hit Cmd+S:

1. Press Cmd+, to open Settings
2. Search for format on save
3. Check the box for Editor: Format On Save

Or add this to your VS Code settings.json:

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

All the formatting methods described in this guide (Prettier, JSON Tools, format on save) work exactly the same on macOS. The only difference is the keyboard shortcuts, which use Cmd and Option instead of Ctrl and Alt.

Quick Comparison: All JSON 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 extra actions like sorting keys or minifying.

Enable Format on Save for JSON

Format on save makes VS Code beautify your JSON automatically every time you press Ctrl+S (or Cmd+S on Mac). No more reaching for the format shortcut each time.

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 auto-formatting for JSON files and don't want it affecting other languages, use language-specific settings:

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

This keeps formatting automatic for JSON without changing how other file types behave. Every time you save a JSON file, VS Code will prettify it instantly.

How to Create a JSON File in VS Code

Before you can format JSON, you need a JSON file. Here's how to create one in VS Code:

1. Press Ctrl+N (Cmd+N on Mac) to create a new file
2. Press Ctrl+S (Cmd+S on Mac) and save it with a .json extension, for example data.json
3. VS Code automatically recognizes the .json extension and enables JSON language support

Alternatively, if you want to paste JSON into an untitled file and get formatting support immediately:

1. Open a new tab with Ctrl+N (Cmd+N on Mac)
2. Click the language mode indicator in the bottom-right corner (it probably says Plain Text)
3. Choose JSON from the list
4. Paste your JSON content
5. Press Shift+Alt+F (Shift+Option+F on Mac) to format it

You can also create a JSON file from the VS Code Explorer sidebar. Right-click inside the file tree, select New File, and type a filename ending in .json. VS Code will open the file with full JSON support including syntax highlighting, validation, formatting, and autocomplete for known schemas.

Use Prettier to Format JSON in VS Code

VS Code's built-in JSON formatter works well on its own. Prettier becomes useful when your whole project already uses it 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 across everyone's editor.

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.

Best JSON Formatter Extensions for VS Code

VS Code's built-in JSON support is solid for everyday formatting, but extensions add extra functionality that the built-in tools don't cover. Here are the most useful JSON formatter extensions:

JSON Tools: This extension adds commands to prettify, minify, and sort JSON keys directly from the Command Palette. If you need to quickly compact JSON into a single line or alphabetically sort keys, JSON Tools is the go-to choice.

Prettier - Code formatter: The most popular code formatter overall. Prettier formats JSON along with JavaScript, TypeScript, HTML, CSS, and Markdown. It's ideal when your team wants consistent formatting across all file types.

Pretty JSON: A lightweight extension focused purely on making JSON readable. It prettifies JSON and can also convert between JSON and other formats.

JSON Formatter: Another simple extension that adds formatting commands specifically for JSON files.

To install any of these extensions:

1. Open the Extensions sidebar with Ctrl+Shift+X (Cmd+Shift+X on Mac)
2. Search for the extension name
3. Click Install
4. The extension's commands appear in the Command Palette immediately

For most people, the built-in formatter plus JSON Tools covers everything. Add Prettier only if your project already uses it.

How to Prettify and Beautify JSON in VS Code

Prettifying, beautifying, and formatting JSON all mean the same thing in VS Code. They take compact or messy JSON and adding proper indentation and line breaks so it's easy to read.

Here's how to prettify JSON in VS Code:

1. Open your JSON file
2. Press Shift+Alt+F on Windows/Linux or Shift+Option+F on Mac
3. Your JSON is instantly beautified with clean indentation

If you prefer using the Command Palette, press Ctrl+Shift+P (Cmd+Shift+P on Mac) and type Format Document. This runs the same prettify action.

You can also right-click anywhere in the editor and select Format Document from the context menu. All three methods produce the same beautifully formatted result.

When the shortcut doesn't prettify your JSON, it's usually because VS Code doesn't recognize the file as JSON. Check the language mode in the bottom-right corner of VS Code. If it says Plain Text, click it and switch to JSON. Then try the shortcut again.

Minify JSON in VS Code

Minifying JSON is the opposite of prettifying. It strips all whitespace and line breaks to produce the most compact version of your data. This is useful when you need smaller payloads for APIs, log entries, or embedded JSON strings.

VS Code does not include a built-in JSON minify command. Here are several ways to minify JSON:

Using the JSON Tools extension:

1. Install JSON Tools from the Extensions marketplace
2. Open your JSON file
3. Open the Command Palette with Ctrl+Shift+P (Cmd+Shift+P on Mac)
4. Type JSON Minify and press Enter

Using jq from the command line:

jq -c . input.json > minified.json

Using Python:

python -c "import json,sys; json.dump(json.load(open(sys.argv[1])),open(sys.argv[2],'w'),separators=(',',':'))" input.json minified.json

Minified JSON looks like this, everything on a single line with no spaces:

{"name":"Alex","age":30,"city":"Portland","skills":["Python","SQL","JavaScript"]}

Keep formatted JSON for editing and readability. Use minified JSON when you need compact data for transmission or storage.

Format JSON to One Line or Expand to Multiple Lines

Sometimes you need to collapse prettified JSON into a single line, or expand a one-liner into readable multi-line format.

To convert multi-line JSON to one line (minify), use the JSON Tools extension or jq as described in the minify section above. The jq -c flag specifically outputs compact single-line JSON.

To convert one-line JSON to multiple lines (prettify), simply press Shift+Alt+F (Shift+Option+F on Mac). VS Code's built-in formatter takes any valid single-line JSON and expands it into properly indented multi-line format.

Here's a quick example:

One-line JSON:

{"users":[{"name":"Alex","role":"admin"},{"name":"Sam","role":"editor"}]}

After pressing Shift+Alt+F (expanded to multiple lines):

{
  "users": [
    {
      "name": "Alex",
      "role": "admin"
    },
    {
      "name": "Sam",
      "role": "editor"
    }
  ]
}

This back-and-forth between compact and expanded JSON is a common workflow when copying JSON between editors, APIs, and config 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 -Recurse -Filter *.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. The PowerShell version uses Get-ChildItem -Recurse -Filter *.json to find all JSON files recursively, which is handy when your project has JSON files scattered across subdirectories. 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.

Flatten JSON in VS Code

If you're working with deeply nested JSON and want to simplify the structure, you can flatten it. Flattening converts nested objects and arrays into a single level with dot-notation keys.

For example, this nested JSON:

{
  "user": {
    "name": "Alex",
    "address": {
      "city": "Portland"
    }
  }
}

Becomes this when flattened:

{
  "user.name": "Alex",
  "user.address.city": "Portland"
}

VS Code doesn't have a built-in flatten command, but you have a few options:

• Use a JSON Flattener tool for quick online flattening
• Install the JSON Tools extension, which offers basic transformation commands
• Use a script with Python or jq for more control over how nesting is handled

Flattening is especially useful before importing JSON into spreadsheets, databases, or data analysis tools where a flat structure is easier to query.

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, or open the Command Palette with Ctrl+Shift+P and search for it.

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. You don't need any extension to prettify or beautify JSON.

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. From then on, every time you save a JSON file, VS Code formats it automatically.

What is the shortcut to format JSON in VS Code on Mac?

Press Shift+Option+F to format the entire JSON document. For formatting a selection, use Cmd+K Cmd+F. For the Command Palette, use Cmd+Shift+P and type Format Document.

How do I prettify or beautify JSON in VS Code?

Prettify, beautify, and format all do the same thing. Press Shift+Alt+F (Shift+Option+F on Mac) to prettify your JSON with proper indentation and line breaks.

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.

How do I minify JSON in VS Code?

Install the JSON Tools extension and use the JSON Minify command from the Command Palette. Alternatively, use jq -c . input.json from the terminal for command-line minification.

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.

How do I create a JSON file in VS Code?

Press Ctrl+N (Cmd+N on Mac) to create a new file, then save it with a .json extension. VS Code automatically enables JSON language support for any file ending in .json.

How do I format JSON to one line in VS Code?

Use the JSON Tools extension's JSON Minify command, or run jq -c . input.json from the terminal. Both compress JSON into a single compact line.

What is the best JSON formatter extension for VS Code?

For most users, the built-in formatter is enough. If you need extra features like minification and key sorting, install JSON Tools. If you want consistent formatting across many languages, use Prettier.

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