How to Format JSON in VS Code

1. Format Document shortcut

The quickest way to format a JSON file in VS Code:

You can also open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type Format Document.

VS Code's built-in JSON formatter uses 4-space indentation by default. To change it, set editor.tabSize in settings.

2. Format on Save

Enable Format on Save so VS Code automatically formats every JSON file when you save:

1. Open settings: Ctrl+, (Windows/Linux) or Cmd+, (macOS)
2. Search for format on save
3. Check Editor: Format On Save

To enable Format on Save only for JSON files (not all file types), add this to your settings.json:

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

3. Configure indent size

VS Code defaults to 4-space indentation for JSON. To use 2 spaces (the web convention), add this to your settings.json:

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

Open settings.json via the Command Palette: Preferences: Open User Settings (JSON).

4. Prettier for JSON

If your project uses Prettier for consistent formatting across JavaScript, TypeScript, and JSON:

1. Install the Prettier — Code Formatter extension from the VS Code Marketplace.
2. Set Prettier as the default formatter for JSON in settings.json:

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

Prettier reads your .prettierrc config for tab width and other options. A typical .prettierrc for JSON:

{
  "tabWidth": 2,
  "useTabs": false
}

5. Workspace settings (.vscode/settings.json)

To share formatting settings with your team, put them in a .vscode/settings.json file at the root of your repository. These settings override user settings for anyone who opens the project.

// .vscode/settings.json
{
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

Format JSON without leaving the editor: the Jsonic extension

If you format JSON in VS Code often, the free Jsonic — JSON Tools extension adds one-key Format, Minify and Validate (with the exact error line), plus in-editor conversion to TypeScript, YAML and CSV. Everything runs locally — nothing is uploaded. Right-click a .json file or press Cmd/Ctrl+Shift+J to format in place.

When to use an online formatter instead

VS Code's formatter works well for files in your project. An online formatter is faster when:

• You're inspecting a response from an API without saving it to a file
• You need to validate and format JSON from a different machine or browser
• You want a tree view to explore deeply nested structures
• You're sharing a formatted snippet with someone who doesn't have VS Code open

Jsonic's formatter validates the JSON as it formats, so you see the exact error position if the input is invalid.

Frequently asked questions

What is the shortcut to format JSON in VS Code?

Shift+Alt+F on Windows/Linux, Shift+Option+F on macOS. This runs the Format Document command using the active formatter for the current file type. You can also open the Command Palette (Ctrl+Shift+P) and type Format Document.

How do I enable Format on Save for JSON in VS Code?

Open settings (Ctrl+,), search for "format on save", and enable Editor: Format On Save. To limit it to JSON files only, add {"[json]": {"editor.formatOnSave": true}} to your settings.json.

Why is VS Code not formatting my JSON?

The three most common causes: (1) the file has a syntax error — VS Code won't format invalid JSON; (2) the file extension is not .json — check the language mode in the status bar; (3) multiple formatters are installed and conflicting — set a default formatter in settings.

Does VS Code support JSONC (JSON with comments)?

Yes. Use the [jsonc] language identifier in settings for files like tsconfig.json and .vscode/settings.json that allow comments. The VS Code status bar shows the language mode of the current file.

How do I change indentation from 4 spaces to 2 spaces for JSON?

Add {"[json]": {"editor.tabSize": 2}} to your settings.json. This overrides the global indentation setting for JSON files only. VS Code's built-in formatter defaults to 4 spaces; Prettier defaults to 2.

How do I fix VS Code when multiple formatters conflict?

Set a default formatter explicitly: {"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}} for Prettier, or "vscode.json-language-features" for the built-in formatter. Right-click in the editor and choose Format Document With… to pick manually.