Visual Studio Code Formatting for "{ }"

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

The code formatting is available in Visual Studio Code through the following shortcuts:

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

Alternatively, you can find the shortcut, as well as other shortcuts, through the 'Command Palette' provided in the editor with Ctrl +Shift+ P (or Command + Shift + P on Mac), and then searching for format document.

For unsaved snippets

Open command palette (Win: F1 or Ctrl+Shift+P)
Find "Change Language Mode"
Select language e.g. json. By now syntax should be highlighted.
Format document (e.g. Open Command Palette -> "Format Document")

Unformat

Select text
Command Palette -> Join Lines

'Show the pics'

Sample Image

How do you auto format code in Visual Studio?

To format a selection: Ctrl+K, Ctrl+F

To format a document: Ctrl+K, Ctrl+D

See the pre-defined keyboard shortcuts. (These two are Edit.FormatSelection and Edit.FormatDocument.)

Note for macOS

On macOS, use the CMD ⌘ key instead of Ctrl:

To format a selection: CMD ⌘+K, CMD ⌘+F
To format a document:
CMD ⌘+K, CMD ⌘+D

How do you format code on save in VS Code

As of September 2016 (VSCode 1.6), this is now officially supported.

Add the following to your settings.json file:

"editor.formatOnSave": true

Automatically format code in Visual Studio Code

You can choose one of the below options

"editor.formatOnType": false,
"editor.formatOnPaste": false,
"editor.formatOnSave": false

Or create a custom keyboard shortcut by editing editor.action.formatDocument. But I AFAIK there is no option to execute the command whenever you press ;. You can set a keyboard shortcut, but I guess you're not able to write ; anymore then :D

How do you change the way Visual studio Code format the code on Windows

What's the file extension and what formatter you have configured for that type of file?

Prettier wouldn't ever do that, so if you let us know your settings we can figure out what's wrong.

Make sure you have it configured to the file type, for example, for javascript/react add these to your settings.json file:

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

You can configure Prettier to your preferred behaviour with lines like these:

"prettier.printWidth": 80,
"prettier.semi": true,
"prettier.singleQuote": true,
"prettier.tabWidth": 2,
"prettier.useTabs": false,

To get to your settings.json, go to the command palette and look for "Open settings (JSON), and add these lines in it.

How to configure code formatters Beautify, Prettier, per project in VS Code

Just use workspace settings, in VS Code you have User settings that are used for every project, and Workspace settings (saved in .vscode/settings.json in the project folder) that are specific to that project.

If you want to share workspace settings with others you can commit .vscode/settings.json.

You can edit both settings directly on the .json files, or through the VS Code settings editor (Files->Preferences->Settings).