How to Format JSON in VS Code, vim, and Online Tools

Formatting JSON properly improves readability and helps catch syntax errors quickly. Whether you’re using VS Code, vim, or online utilities, several built-in features and extensions make JSON formatting straightforward and efficient. This guide walks you through practical methods for each platform so you can choose the best approach for your workflow.

Formatting JSON in Visual Studio Code

VS Code offers the simplest JSON formatting experience for most developers. The editor includes native JSON support with built-in formatting capabilities that require minimal configuration.

Using the Built-in Formatter:

Open your JSON file in VS Code and use the keyboard shortcut Shift + Alt + F (Windows/Linux) or Shift + Option + F (Mac). This automatically formats your entire document with proper indentation and spacing. The formatter handles arrays, objects, and nested structures intelligently.

Formatting Specific Sections:

Select just the JSON code you want to format, then apply the same keyboard shortcut. VS Code will format only your selection, leaving the rest untouched.

Customizing Format Settings:

Open your VS Code settings (File → Preferences → Settings) and search for “JSON format”. You can adjust settings like:

• Tab size (usually 2 or 4 spaces)
• Insert spaces vs. tabs
• Whether to keep lines on one line
• Trailing comma behavior

Add these to your .vscode/settings.json file for project-specific formatting:

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

Using Prettier Extension:

Install the Prettier extension from the VS Code marketplace for more opinionated formatting with additional customization options. It enforces consistent code style across your team and works with JSON, JavaScript, and many other formats.

Formatting JSON in vim

vim users have several methods to format JSON, ranging from command-line tools to built-in filtering. While vim doesn’t have native JSON formatting like modern IDEs, these approaches are powerful and efficient.

Using External Tools with vim:

The most common approach uses jq, a lightweight JSON processor. First, ensure you have jq installed on your system. Then, within vim, position your cursor on the JSON content and run:

:%!jq .

This filters your entire buffer through jq, which prettifies the JSON and fixes formatting issues. For a specific range, select the lines and use:

:'<,'>!jq .

Using Python for Formatting:

If jq isn’t available, Python’s built-in json module works well. Run this vim command:

:%!python -m json.tool

This reformats your entire JSON file with standard indentation (4 spaces by default). For compact output, use:

:%!python -m json.tool --compact

Adding vim Keybindings:

Add this to your .vimrc file to create a custom command:

autocmd FileType json nnoremap <leader>f :%!jq .<CR>

Now pressing <leader>f (usually backslash) will format JSON automatically whenever you open a .json file.

vim-json Plugin:

For enhanced JSON support, install the vim-json plugin using your preferred plugin manager. It provides syntax highlighting, validation, and better indentation handling.

Using Online JSON Formatting Tools

Online tools are perfect for quick formatting when you don’t have access to your development environment or need to share formatted JSON with others.

Advantages of Online Tools:

These web-based utilities require no installation, work across all devices, and often include additional features like JSON validation, minification, and conversion to other formats. They’re ideal for one-off formatting tasks and collaborative work.

Common Features:

Most online JSON formatters include:

• Automatic pretty-printing with customizable indentation
• Syntax error detection and reporting
• JSON validation against schemas
• Minification to reduce file size
• Copy-to-clipboard functionality
• Support for large files (usually up to several MB)

Best Practices for Online Tools:

When using online formatters, be cautious with sensitive data. Don’t format API keys, passwords, or confidential information through public tools. For sensitive work, use local solutions like VS Code or vim instead. Always verify that the tool doesn’t log or store your data.

Using Format Tools for Data Validation:

Beyond formatting, these tools often highlight structural problems. A formatter that fails to process your JSON alerts you to syntax errors like missing commas, unclosed brackets, or invalid escape sequences. This makes them valuable for debugging malformed JSON files.

How to Use Our JSON Formatter Tool

For developers who prefer an integrated solution, our JSON formatter at DevUtilityPro combines the simplicity of online tools with developer-friendly features. Simply paste your JSON code, select your preferred indentation level, and get perfectly formatted output instantly. The tool validates your JSON syntax, highlights errors, and allows you to switch between formatted and minified versions. It’s perfect for quick formatting tasks and learning how different formatting styles affect readability.

Frequently Asked Questions

What’s the difference between pretty-printing and minifying JSON?

Pretty-printing adds whitespace, line breaks, and indentation to make JSON human-readable. Minifying removes all unnecessary whitespace to reduce file size for transmission. Pretty-printing is ideal for development and debugging, while minification is useful for production APIs and reducing bandwidth. Most formatters can do both—VS Code and online tools typically default to pretty-printing but offer minification options.

Why does my JSON fail to format in VS Code?

JSON formatting fails when the syntax is invalid. Common issues include missing commas between properties, unquoted keys, trailing commas in arrays, or unescaped special characters. VS Code will show error indicators in the editor. Before formatting, check the Problems panel (Ctrl + Shift + M) to identify and fix syntax errors. Once corrected, formatting will work properly.

Can I automate JSON formatting in my workflow?

Yes. In VS Code, enable “Format on Save” in settings to automatically format JSON whenever you save a file. In vim, add the keybinding to your config as shown above. For team projects, use pre-commit hooks with tools like Prettier to enforce formatting standards before code is committed. This ensures consistency across your entire codebase without manual intervention.