If you have some minified string of JSON data (e.g. from an HTTP response), it’s quite common to want to format it in a way that’s a little more readable to a human being. In Visual Studio Code (VS Code), this can be a little tricky the first time, depending on whether the JSON is in a file or not.

Note: shortcuts provided are for Linux, and may vary on Windows or Mac.

Formatting a JSON File

Let’s start with the simple scenario: you have a .json file open in VS Code. All you have to do is right-click and select the “Format Document” option (or use the keyboard shortcut, Ctrl+Shift+I:

This formats the JSON quite nicely:

Formatting JSON From Clipboard

A more common scenario for me is to copy a chunk of JSON and paste it directly into VS Code, without saving it first.

Press Ctrl+N or select File -> New Text File from the application menu to open a new/unsaved file, and paste a chunk of JSON into it. If you right-click in this case… there’s no “Format Document” option!

The problem is that VS Code doesn’t know that this chunk of text you pasted is actually JSON. In order to tell it exactly this, press Ctrl+Shift+P, start typing “Change“, then select “Change Language Mode“:

Then, start typing “JSON” and select it when it comes up:

At this point, you’ll see the JSON get syntax highlighting, and the “Format Document” option is now available:

…and here’s the result: