In the early 2000s, software developers used to write null-terminated strings of text to save and retrieve data from databases. These were usually denoted by a set of keys, or a single value in case of a key being NULL. Over time, JSON has become the defacto standard for representing these data structures in software development.
Visual Studio Code handles JSON files natively, in fact, it uses JSON for its own configuration files. Whenever you open a file that ends with .json extension, VS Code provides features that make it simpler to write or modify the file’s content.
In this article, we will show you a few ways to quickly format JSON files into human-readable syntax with proper indentation in VSCode.
JSON indentation standard
Before getting any further, you should know that JSON is a serialization format, not a presentation format.
Because of that, there is no standard for its indentation. In other words, JSON is typically sent as compactly as possible. The JSON specification permits any number of whitespaces.
However, there is a good practice called “pretty-printing”, or sometimes, beautify/format JSON. What it does is basically add indentation and spaces to make compact (or minified) JSON reads better under the human eye.
Remember to be consistent with the coding conventions of your project and use the same indendation level as you would for an JS object literal. Usually you should see JSON objects indented at 2 spaces, following coding standards checked by JSLint or NPM (Isaac Shlueter’s) coding standards. There are other standards, too. For more details about this, check out this StackOverFlow answer.
VSCode Format JSON Keyboard Shortcut
As VSCode handles JSON files natively, you can format your JSON document using Ctrl+Shift+I keyboard shortcut. Please note that the shortcut may varies between different operating systems.
- On Windows: Shift + Alt + F
- On Mac: Shift + Option + F
- On Linux: Ctrl + Shift + I
Alternatively, you can open the Command Palette (using Ctrl + Shift + P), and then searching for format document.
VSCode Format Unsaved JSON
The keyboard shortcut above is guaranteed to work if you have saved the file with a .json extension.
For unsaved JSON snippet, VSCode has the ability to recognize the format automatically. Most of the time, the feature works right after you paste the snippet, but sometimes it doesn’t, in this case, you would have to manually specify the file syntax.
In order to do that, open the Command Palette (using Ctrl + Shift + P), and then searching for Change Language Mode, then select JSON in the drop-down.
Alternatively, you can click the file format button in the lower right corner and select JSON in the drop-down menu to achieve the same result.
Once VSCode has successfully recognizes the file format, press Ctrl + Shift + I or Shift + Alt + F like you normally do to format the JSON file.
Change keyboard shortcut to format JSON
You can change the shortcut to format JSON files by modifying editor.action.formatDocument setting.
First, in a VSCode window, open Keyboard Shortcuts preferences by selecting File > Preferences > Keyboard Shortcuts (or press Ctrl + K followed by Ctrl + S). Alternatively, you can open Command Palette (using Ctrl + Shift + P) and type in “Keyboard Shortcuts” to achieve the same result.
In the Keyboard Shortcuts tab, search for editor.action.formatDocument setting. In order to change its hotkey, double click in the corresponding Keybinding column and press the new hotkey.
We hope that the information above is useful to you. If you’re interested in advanced editing features of VSCode, check out our post on how to enable/disable word wrap in VSCode, use LaTeX in VSCode, collapse blocks, auto indent your code, delete the whole line in Visual Studio Code.
Also, check out the video instruction below to get a hands-on grasp about how to format JSON in VSCode.
