How to Format JSON in VS Code (5 Easy Methods)

Last Tuesday, I was debugging an API response when my teammate pinged me with a screenshot of what looked like one massive wall of text. “Can you make sense of this JSON?” It was 2,000 characters of minified API output with zero whitespace. I copied it, hit Shift+Alt+F in VS Code, and boom—perfectly formatted JSON in half a second. Sent it back to him, and he asked “Wait, how did you do that?”

If you’re reading this, you’ve probably been in a similar situation. Whether you’re working with API responses, config files, or just trying to make sense of compact JSON data, knowing how to format JSON in VS Code can save you serious time and headaches.

Why JSON Formatting Matters

Here’s the thing about minified JSON: it’s great for machines (smaller file size, faster transmission) but terrible for humans. Try debugging this:

{"userId":12345,"userName":"alex_dev","preferences":{"theme":"dark","notifications":true,"language":"en"},"lastLogin":"2025-11-05T14:23:00Z","roles":["admin","editor"]}

Now compare it to this:

{
  "userId": 12345,
  "userName": "alex_dev",
  "preferences": {
    "theme": "dark",
    "notifications": true,
    "language": "en"
  },
  "lastLogin": "2025-11-05T14:23:00Z",
  "roles": ["admin", "editor"]
}

Same data, but the second version is actually readable. You can see the structure, spot issues, and understand the data hierarchy at a glance. That’s what formatting does—it adds whitespace and indentation to make JSON human-friendly.

Method 1: Built-in Format Document (Shift+Alt+F)

VS Code comes with JSON formatting built right in. No extensions needed. Here’s how it works:

Step 1: Open your JSON file (or paste JSON into a new file)

Step 2: Press the keyboard shortcut:

• Windows/Linux: Shift + Alt + F
• Mac: Shift + Option + F

That’s it. VS Code will instantly format your JSON with proper indentation and line breaks.

What if the shortcut doesn’t work? Make sure your file is saved with a .json extension or set the language mode to JSON. Click the language indicator in the bottom-right corner of VS Code and select “JSON”.

Want to format just a specific section? Select the text you want to format, then use Ctrl + K, Ctrl + F (Windows/Linux) or Cmd + K, Cmd + F (Mac) to format just that selection.

When I’m working with API responses that come back minified, I paste them into a blank VS Code tab, save it as response.json, and hit Shift+Alt+F. Takes about three seconds total. Though for really quick checks, I also keep DevUtilHub’s JSON formatter open in a browser tab—sometimes it’s faster than switching to VS Code.

Method 2: Format on Save (Auto-Format Every Time)

If you’re constantly editing JSON files, formatting manually gets old fast. Here’s how to make VS Code format your JSON automatically every time you save:

Step 1: Open VS Code Settings

• Press Ctrl + , (Windows/Linux) or Cmd + , (Mac)
• Or go to File → Preferences → Settings

Step 2: Search for “format on save”

Step 3: Check the box next to “Editor: Format On Save”

Now every time you save a JSON file (Ctrl + S or Cmd + S), VS Code will format it automatically.

Pro tip: You can enable format on save for specific file types only. Add this to your settings.json:

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

To open settings.json directly, press Ctrl + Shift + P (or Cmd + Shift + P on Mac), type “settings json”, and select “Preferences: Open Settings (JSON)”.

I’ve had format-on-save enabled for years now, and it’s one of those quality-of-life improvements you don’t realize you need until you try it. Never manually format JSON again.

Method 3: Command Palette (For When You Forget the Shortcut)

Can’t remember keyboard shortcuts? Neither can I sometimes. Here’s the menu-driven approach:

Step 1: Open the Command Palette

• Press Ctrl + Shift + P (Windows/Linux)
• Press Cmd + Shift + P (Mac)

Step 2: Type “format document”

Step 3: Select “Format Document” from the dropdown

VS Code will format your entire JSON file. There’s also “Format Selection” if you only want to format highlighted text.

This method is slower than the keyboard shortcut, but it’s helpful when you’re on an unfamiliar keyboard layout or working on someone else’s machine.

Method 4: Prettier Extension (The Popular Choice)

Prettier is the most popular code formatter for VS Code, and it works great with JSON. It’s especially useful if you work with multiple languages and want consistent formatting across all of them.

Step 1: Install Prettier

1. Open Extensions (Ctrl + Shift + X or Cmd + Shift + X)
2. Search for “Prettier - Code formatter”
3. Click Install

Step 2: Set Prettier as default formatter for JSON

Open settings.json and add:

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

Step 3: Configure Prettier options (optional)

Create a .prettierrc file in your project root:

{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "none",
  "printWidth": 80
}

Now when you format JSON (Shift+Alt+F or on save), Prettier handles it according to your preferences.

Why use Prettier over the built-in formatter? Consistency. If you’re working on a team or across multiple projects, Prettier ensures everyone’s JSON (and JavaScript, TypeScript, CSS, etc.) looks the same. It eliminates formatting debates and makes code reviews easier.

I use Prettier on all my projects now. The initial setup takes two minutes, but it saves hours of “tabs vs spaces” arguments.

Method 5: Custom Indentation Settings

Sometimes you need specific indentation—maybe 4 spaces instead of 2, or tabs instead of spaces. VS Code lets you customize this:

For JSON files specifically:

{
  "[json]": {
    "editor.tabSize": 4,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false
  }
}

What these settings mean:

• tabSize: Number of spaces per indentation level (2, 4, 8, etc.)
• insertSpaces: Use spaces instead of tab characters
• detectIndentation: If false, always use your settings; if true, VS Code will try to match existing file indentation

To apply these settings, add them to your settings.json (Command Palette → “Preferences: Open Settings (JSON)”).

Quick indentation change via status bar:

Click the “Spaces: 2” or “Tab Size: 4” indicator in the bottom-right corner of VS Code. You can switch between spaces and tabs, or change the indentation size on the fly.

When I’m working with legacy projects that use weird indentation standards (looking at you, 8-space tabs), I’ll adjust these settings to match the existing codebase. Consistency matters more than personal preference.

Bonus: Format JSON from API Responses

Here’s a real-world workflow I use constantly:

Scenario: You’ve just hit an API endpoint and got back minified JSON in your terminal or browser dev tools.

Quick method:

1. Copy the JSON response
2. Open VS Code
3. Create new file (Ctrl + N or Cmd + N)
4. Paste the JSON
5. Set language to JSON (bottom-right corner)
6. Format with Shift+Alt+F

Even quicker method:

Use DevUtilHub’s JSON formatter in your browser. Paste, format, copy back. No file creation needed, and it validates the JSON at the same time.

I keep both VS Code and the online formatter in my workflow. For quick one-off checks, the browser tool is faster. For JSON I’m actually editing or saving, VS Code wins.

When to Minify JSON (And How)

Formatting makes JSON readable, but sometimes you want the opposite—you need compact JSON for production APIs or config files.

When to minify:

• Sending JSON over the network (APIs, webhooks)
• Storing JSON in size-constrained databases
• Embedding JSON in HTML (data attributes, inline scripts)

How to minify in VS Code:

There’s no built-in minify command, but you can use the Minify extension:

1. Install “Minify” extension
2. Right-click in your JSON file
3. Select “Minify”

Online alternative:

I prefer using DevUtilHub’s JSON minifier for quick minification. Paste your formatted JSON, click minify, copy the result. Takes three seconds and doesn’t require installing anything.

Command-line minification (for automation):

# Using jq (install with: brew install jq or apt-get install jq)
jq -c . input.json > output.json

The -c flag tells jq to output compact JSON (no whitespace).

Common Issues and Fixes

Issue 1: “Format Document” is Grayed Out

Cause: VS Code doesn’t recognize the file as JSON.

Fix:

1. Save the file with .json extension
2. Or manually set language: Click language indicator (bottom-right) → Select “JSON”

Issue 2: Formatting Doesn’t Change Anything

Cause: Your JSON might already be formatted, or there’s a syntax error preventing formatting.

Fix:

1. Check the bottom of VS Code for error messages
2. Use a validator like DevUtilHub’s JSON formatter to check for syntax errors
3. Look for common issues: trailing commas, single quotes instead of double quotes, missing commas

Issue 3: Wrong Indentation After Formatting

Cause: VS Code is detecting indentation from the file itself.

Fix:

1. Set "editor.detectIndentation": false in settings
2. Manually set tab size in bottom-right corner
3. Or select all (Ctrl+A), delete indentation, then reformat

Issue 4: Format on Save Not Working

Cause: Multiple formatters installed, or formatter not set as default.

Fix:

1. Open settings.json
2. Add:

{
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  }
}

3. Reload VS Code

I’ve hit every one of these issues at some point. The syntax error one is particularly sneaky—VS Code won’t format invalid JSON, so if nothing happens when you press Shift+Alt+F, check your JSON syntax first.

Formatting JSON in Other Situations

Converting CSV to JSON

If you’re working with CSV data and need it in JSON format, VS Code doesn’t have built-in conversion. I use DevUtilHub’s CSV to JSON converter for this. Paste CSV, get JSON, format it in VS Code. Super handy when dealing with data exports.

Working with JSON Configuration Files

Package.json, tsconfig.json, settings.json—all of these are JSON files you’ll edit regularly. Enable format-on-save for these to keep them clean:

{
  "files.associations": {
    "*.json": "json"
  },
  "[json]": {
    "editor.formatOnSave": true
  }
}

Formatting JSON in Markdown Code Blocks

If you’re writing documentation with JSON examples in Markdown files, you can still format the JSON:

1. Select just the JSON content (inside the code block)
2. Press Ctrl + K, Ctrl + F to format selection
3. Make sure the language is set to JSON (not Markdown)

This keeps your documentation examples readable without breaking the Markdown formatting.

My Recommended Setup

After years of working with JSON in VS Code, here’s what I recommend:

Minimal setup (no extensions):

• Enable format on save
• Use Shift+Alt+F shortcut
• Keep default 2-space indentation

Recommended setup (with Prettier):

• Install Prettier extension
• Set as default formatter for JSON
• Enable format on save
• Add .prettierrc config to projects

Add to settings.json:

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

This gives you automatic formatting with consistent indentation across all JSON files. Set it up once, forget about it forever.

Wrapping Up

Formatting JSON in VS Code doesn’t have to be complicated. Five methods, all easy:

1. Shift+Alt+F - Instant format (my most-used method)
2. Format on save - Never format manually again
3. Command Palette - When you forget shortcuts
4. Prettier - Team consistency and multi-language support
5. Custom settings - Fine-tune indentation to your needs

Pick one method, learn the shortcut, and make it muscle memory. You’ll save yourself hours of squinting at minified JSON and manually adding line breaks.

And remember: sometimes the fastest way to format JSON isn’t in VS Code at all. For quick API response checks or one-off formatting tasks, I keep DevUtilHub’s JSON formatter bookmarked. Different tools for different workflows—use what makes you fastest.

Now go forth and format some JSON. And when your teammate asks how you made that wall of text readable in three seconds, send them this article.

---

Related Resources

For more on working with JSON and data formats:

• Debug Malformed JSON: 6 Common Syntax Errors & Quick Fixes - Fix JSON errors fast
• JSON vs CSV: When to Use Each Format and Convert - Choose the right format

DevUtilHub Tools for JSON:

• JSON Formatter - Format and validate JSON instantly
• JSON Minifier - Compact JSON for production
• JSON to CSV - Convert JSON data to CSV format
• CSV to JSON - Convert CSV to JSON format

---

FAQ

Can I format JSON in VS Code without any extensions?

Yes! VS Code has built-in JSON formatting. Just press Shift+Alt+F (Windows/Linux) or Shift+Option+F (Mac) to format any JSON file. No extensions required. The built-in formatter works great for most use cases—you only need extensions like Prettier if you want advanced configuration options or consistent formatting across multiple languages.

Why isn’t my JSON formatting in VS Code?

There are three common reasons: First, VS Code might not recognize your file as JSON—save it with a .json extension or manually set the language mode to JSON. Second, your JSON might have syntax errors (trailing commas, missing quotes, etc.) that prevent formatting. Third, you might not have a default formatter set—go to Settings and set "editor.defaultFormatter" for JSON files.

What’s the difference between 2-space and 4-space indentation for JSON?

It’s purely a stylistic choice with no functional difference. JSON itself doesn’t care about indentation—it’s just for human readability. Two spaces is more common in web development and uses less horizontal space (helpful for deeply nested JSON). Four spaces can be easier to visually scan. Pick what your team prefers and stay consistent. You can set this in VS Code’s settings under "editor.tabSize".

How do I format only part of a JSON file in VS Code?

Select the text you want to format, then press Ctrl+K followed by Ctrl+F (Windows/Linux) or Cmd+K followed by Cmd+F (Mac). This formats only the selected text instead of the entire file. This is useful when you’re working with mixed content or just want to fix a specific section without affecting the rest of the document.

Should I use Prettier or the built-in JSON formatter?

Use the built-in formatter if you’re working solo or just need basic formatting. Use Prettier if you’re on a team, work with multiple file types (JSON, JavaScript, TypeScript, CSS, etc.), or want more configuration options. Prettier enforces consistent formatting across all supported languages and integrates with ESLint. The built-in formatter is simpler and requires zero configuration, so start there unless you have specific needs.

Can VS Code automatically format JSON when I paste it?

Not by default, but you can get close. Enable “Format On Paste” in settings: search for "editor.formatOnPaste" and check the box. However, this only works if VS Code recognizes the content as JSON. For pasting JSON from APIs or other sources, I usually paste first, then immediately hit Shift+Alt+F to format. Or use an online formatter like DevUtilHub’s JSON formatter for quick paste-and-format workflows.