CODEWITHSUNDEEP
jsonvisual-studio-code
Space
Space

Reputation: 1040

Json files structure/format in Visual Studio Code

In Visual Studio Code (under Windows), my present Json files are displayed as the following :

enter image description here

I would them to be formatted as displayed below :

enter image description here

Upvotes: 19

Views: 41255

Answers (10)

nisalap
nisalap

Reputation: 172

If you need to setup the formatting to be consistent on every project you work, you can create a .vscode directory on the project root, create a settings.json file inside the .vscode directory.

To format JSON files you can add the following json to the settings.json file.

{
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features",
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false,
  }
}

This would format the file when you save it. You can set tabSize to whatever size you prefer. insertSpace would add spaces instead of tabs when you use tabs. detectIndentation would ignore the current file indentation method and will stick to your specific settings.

Upvotes: 1

BharathRao
BharathRao

Reputation: 2046

For MacOS, if shortcuts didn't worked there might be conflicts between the formatters plugins. Try

select the code -> right click -> choose format selection

enter image description here

Upvotes: 0

Mati Ullah Zahir
Mati Ullah Zahir

Reputation: 215

RIGHT CLICK and Select Source Action then JSON file will be converted to JSON format

enter image description here

Upvotes: 4

Rohit Agrawal
Rohit Agrawal

Reputation: 371

On your Mac, you can do so by pressing command+shift+p and then type or select "JSON: Sort Document"

Upvotes: 1

darefilz
darefilz

Reputation: 701

In 2022 it's Ctrl+Shift+I as stated on the Visual Studio Code website.

Upvotes: 7

nakeer
nakeer

Reputation: 767

Open the json file and SHIFT + OPTION + F for mac

Upvotes: 16

Lee Davis
Lee Davis

Reputation: 9

Install Prettier using the extensions, and then right click, select format document with and pick Prettier.

Upvotes: 0

JJ.
JJ.

Reputation: 1149

Use ALT-SHIFT-F to auto format a json file in windows

Upvotes: 21

Shayan Tanweer
Shayan Tanweer

Reputation: 1

Install a code formatting extension then save the file.

Upvotes: 0

takudzw_M
takudzw_M

Reputation: 356

Press Ctrl-Shift-p to format the documents. I don't know if this shortcut works on Windows, but it does on Linux.

Upvotes: 2

Related Questions