3 Easy Ways to Format JSON for Cleaner Code

JSON (JavaScript Object Notation) has become the universal language for data exchange. Whether you’re working with APIs, configuration files, or debugging logs, JSON is everywhere in software development. However, when JSON is minified or poorly formatted, it’s difficult to read and prone to errors.

That’s why formatting JSON properly is essential. A cleanly formatted JSON file improves readability, helps you debug faster, and makes collaboration easier.

In this post, we’ll explore 3 easy ways to format JSON:

Using online JSON formatter tools
Formatting JSON with the command-line tool jq
Formatting JSON inside Visual Studio Code (VSCode)

By the end, you’ll have multiple methods in your toolbox for making your JSON neat and tidy—no matter where or how you’re working.

Why Format JSON?

Before jumping in, let’s quickly discuss why formatting JSON matters:

Readability: Proper indentation and line breaks help humans quickly scan and understand the structure.
Error detection: Formatted JSON makes syntax errors stand out more clearly.
Consistency: Clean JSON is easier to compare during code reviews or version control.
Automation: Many tools expect properly formatted JSON for processing or validation.

If you want to learn the basics of JSON, check out the official JSON tutorial on W3Schools.

Now, let’s look at how to achieve this in different environments.

1. Using an Online JSON Formatter

What is it?

An online JSON formatter is a web-based tool that takes your raw JSON input and instantly outputs a neatly formatted version. These tools usually have a simple interface where you paste your JSON, click a button, and get back pretty JSON.

How to use it?

One excellent online option is 757box JSON Formatter.

Here’s how to use it:

Open 757box JSON Formatter in your browser.
Paste your minified or messy JSON into the input area.
Click the Format JSON button.
The formatted JSON appears below, neatly indented and easier to read.

This site also offers validation features if needed.

Why use an online formatter?

No installation required: Great if you just want a quick format without setting up anything locally.
Works on any device: Laptop, tablet, phone — as long as you have a browser, you can format JSON.
Good for occasional use: If you rarely need to format JSON, this is hassle-free.

Example

Before formatting:

{"name":"Alice","age":30,"city":"New York","hobbies":["reading","cycling"]}

After formatting:

{
  "name": "Alice",
  "age": 30,
  "city": "New York",
  "hobbies": [
    "reading",
    "cycling"
  ]
}

2. Formatting JSON with jq (Command Line)

What is jq?

jq is a powerful command-line tool designed for parsing, filtering, and formatting JSON data. It’s like sed or awk but specifically for JSON. Beyond pretty-printing, it allows querying and transforming JSON right from your terminal.

How to install jq?

On macOS, install via Homebrew:
```
brew install jq
```
On Ubuntu/Debian:
```
sudo apt install jq
```
On Windows, you can download binaries from the official jq website.

How to format JSON using jq?

Suppose you have a file called data.json with minified JSON:

{"name":"Alice","age":30,"city":"New York","hobbies":["reading","cycling"]}

You can format it by running:

jq '.' data.json

The . filter means “take the entire input as is,” but jq pretty-prints the output by default.

Why use jq?

Perfect for developers comfortable with CLI: Quickly format and manipulate JSON without leaving the terminal.
Automation: Useful in scripts or pipelines when processing API responses or config files.
Advanced features: Query JSON, filter arrays, extract specific fields, and more.

Example output:

{
  "name": "Alice",
  "age": 30,
  "city": "New York",
  "hobbies": [
    "reading",
    "cycling"
  ]
}

3. Formatting JSON in Visual Studio Code (VSCode)

Why VSCode?

Visual Studio Code (VSCode) is one of the most popular code editors today, used by millions worldwide. It comes with built-in JSON support and formatting capabilities, making it a great choice for developers working with JSON regularly.

How to format JSON in VSCode?

Open your JSON file in VSCode.
To format the whole document, press:
- Windows/Linux: Shift + Alt + F
- Mac: Shift + Option + F
Alternatively, right-click anywhere inside the file and select Format Document.
VSCode will automatically indent and space your JSON neatly.

Using Prettier Extension for consistent formatting

For even better consistency, many developers use the Prettier extension, a popular code formatter supporting many languages including JSON.

Install Prettier from the Extensions Marketplace.
Set Prettier as your default formatter (Preferences > Settings > Default Formatter > Prettier).
Enable Format on Save so your JSON is automatically formatted every time you save.

Why use VSCode?

Integrated environment: No need to switch tools or websites.
Customization: Supports different formatting styles via extensions.
Auto-format on save: Saves time and enforces consistency automatically.
Syntax validation: Highlights errors in your JSON as you type.

Bonus Tips for Formatting JSON

Validate JSON first: Formatting tools often include validation features. Always validate before formatting to avoid errors. Try JSONLint for validation.
Consistent spacing: Agree on using spaces or tabs across your team and stick to it.
Minify for production: While pretty JSON is great for humans, minified JSON reduces file size for network transfer. Tools like JSON Minify can help.

Conclusion

Formatting JSON is a simple yet vital step in working with data efficiently. Whether you prefer the convenience of online tools like 757box JSON Formatter, the power of command-line utilities like jq, or the seamless integration inside VSCode, these three methods provide flexible options for all kinds of workflows.

Try each one and find what fits your style best. Clean JSON = less headache and smoother development!