Formatting JSON in Visual Studio Code

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:

Just right-click and select “Format Document“, or press Ctrl+Shift+I.

This formats the JSON quite nicely:

The resulting formatted JSON.

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!

If it’s not a file, it’s not so simple any more… 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“:

Press Ctrl+Shift+P, then select “Change Language Mode“.

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

Select “JSON” from the list of languages.

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

Format Document” is now possible.

…and here’s the result:

The JSON is nicely formatted and human-readable.

Leave a Reply

Your email address will not be published. Required fields are marked *