Collapsing JSON objects for user-friendly formatting
A nested JSON can be tricky to investigate and interpret with the human eye. Collapsing the JSON object makes this much easier! Simply hold CTRL + K + 0 to collapse the JSON:
Before:
After pressing CTRL + K + 0:
Then we can expand out one-by-one by clicking on the arrows at the start of each line to make sense of the JSON data:
For when newly input JSON data isn't being formatted
When first inputting or receiving JSON, VS Code might not format it. Here’s a hack that will format ‘newly added’ JSON objects:
1) Make any small change to the file contents (eg add in a space).
2) Undo said change (delete the space).
3) Save the file.
The newly added JSON object looks like this:
After making and reversing a change, and saving the file, VS Code has formatted the JSON object:
How to ensure the language mode is set correctly
If JSON data is not being formatted within VS Code, check that the language mode is set correctly. The language mode can be found in the bottom right corner of VS Code:
Set it to JSON.
It will look like this once set:
