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
  }
}

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.

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, add {"[json]": {"editor.formatOnSave": true}} to your settings.json.

Why is VS Code not formatting my JSON?

The 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.