Is there a way to view JSON files automatically prettyfied in Visual Studio Code?

Question

There are number of extensions in Visual Studio Code (VS Code) to prettify JSON files. But is there an extension or setting, which enables me to view all *.json files pre-formatted / pre prettified? I find it tedious to constantly press shift-alt-F + ctrl-s when viewing ugly one line json-data, especially if the content of the file is being updated regularly back to pre-formatted form.

Answer 1

On Windows: Shift + Alt + F 
On Mac: Shift + Option + F 
On Linux: Ctrl + Shift + I 

Original answer How do you format code in Visual Studio Code (VSCode)?

I'm adding it here because when I was looking for it I found your post before the other one. Hope it helps.

• Kamaradski: The ideal solution to the original question would not involve pressing any key combos. Nonetheless thanks for leaving this documenting answer!
• Kepol: I get there is not formateer for binary text file installed message
• rd1218: I've made this and was requested to add a formatter. A side window opened, where I've placed category:formatters plaintext prettier. So, I installed Prettier. Next time I've pressed the combo keys I was required to setup the default formatter. And that's it.

Answer 2

you can dowlnoad JSON from Meezilla extension and then Press Cmd/Ctrl+Shift+J to quick beautify with default config.

• AlexAlum: Works perfect for not saved plaintext, thank you!

Answer 3

Be aware that if you have the setting

JSON > format: Keep Lines

enabled (the default is disabled), that a one-liner JSON file (or any JSON that has multiple key/values on the same line) will not be formatted as you wish. The file might not change at all until you disable the Keep Lines setting and re-format.

• lonix: "json.format.keepLines": false

Answer 4

You can download JsonPrettifier extension.

• Kamaradski: Unless this automatically format the file upon opening, it does not answer the original question

Answer 5

Since none of the answers really give an answer to the original question, is there a way to view automatically prettified JSON in Visual Studio Code, I'll here provide a workaround that may help if one has tons of JSON to view that are not prettified. This workaround presents a method to Prettify all of them at once.

VSCODE Prettify multiple JSON files trick, no extensions or plugins needed
(tested on MacOS, VSCODE Version: 1.105.1)

1. Open Visual Studio Code (VSCODE)

2. Select the Preferences: Open User Settings (JSON) command in the Command Palette using shortcut - ⇧⌘P

3. Check that under JSON section there is setting - "editor.formatOnSave": true,

   "[json]": {
    "editor.defaultFormatter": null,
    "editor.formatOnPaste": false,
    "editor.editContext": false,
    "editor.formatOnType": false,
    "editor.wordWrap": "on",
    "editor.formatOnSave": true,
    "files.autoSave": "off"
    },
   

4. Modify the - settings.json - file if necessary, save and close it.

5. Drag the folder that has multiple not prettified JSON files into middle of VSCODE window.
   NOTE! It's recommended to take a backup copy of this folder in case you make a mistake in following these instructions.

6. If file Explorer doesn't appear automatically for some reason, open it from the top left symbol that has two papers on top of each other

7. Click on the first JSON file on the list and its contents should appear on the right panel

8. Use keyboard shortcut - ⌘A - to select all the files on the list

9. Close the just opened file on the right panel ( X symbol after the name tab), if there is any files with contents visible, those files will not be prettified.

10. Click the magnifying glass symbol on left side of the window

11. Type on both fields just plain comma - , - (without these lines or other characters), since commas are found in every JSON document

12. Click - .* - symbol at the end of the first line where you placed the comma, multiple search results should appear below these fields

13. Click then a symbol below that - .* - symbol, it should show a hover text - Replace All - on top of it when you move your cursor on top of it

14. Answer to the question replacing those commas with similar commas - Replace - after which there should be a message at the upper left corner saying something like - Replaced XXX occurences across XX files with ','.

15. Click the Explorer symbol above the magnifying glass and select any file from the list to see that it should be now prettified. VSCODE has saved them all, too (even though - files.autoSave - variable above in the settings has been turned off.

    ---