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

Code Formatting Problem Overview

What is the equivalent of Ctrl + K + F and Ctrl + K + D on Windows in Visual Studio for formatting, or "beautifying" code in the Visual Studio Code editor?

Code Formatting Solutions

Solution 1 - Code Formatting

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'

Solution 2 - Code Formatting

Code Formatting Shortcut:

Visual Studio Code on Windows - Shift + Alt + F

Visual Studio Code on MacOS - Shift + Option + F

Visual Studio Code on Ubuntu - Ctrl + Shift + I

You can also customize this shortcut using a preference setting if needed.

Code Formatting While Saving the File:

Visual Studio Code allows the user to customize the default settings.

If you want to auto format your content while saving, add the below code snippet in the work space settings of Visual Studio Code.

Menu File → Preferences → Workspace Settings

{
    // Controls if the editor should automatically format the line after typing
    "beautify.onSave": true,

    "editor.formatOnSave": true,

    // You can auto format any files based on the file extensions type.
    "beautify.JSfiles": [
        "js",
        "json",
        "jsbeautifyrc",
        "jshintrc",
        "ts"
    ]
}

Note: now you can auto format TypeScript files. Check my update.

Solution 3 - Code Formatting

You can add a keybinding in menu File → Preferences → Keyboard shortcuts.

{ "key": "cmd+k cmd+d", "command": "editor.action.formatDocument" }

Or Visual Studio like:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.formatDocument" }

Solution 4 - Code Formatting

Right click somewhere in the content area (text) for the file
Select Format Document from the menu:
- Windows: Alt+Shift+F
- Linux: Alt+Shift+I
- macOS: ⌥+⇧+F

Solution 5 - Code Formatting

The right key combination is Shift + Alt + F.

Solution 6 - Code Formatting

Visual Studio Code 1.6.1 supports "Format On Save" which will automatically pick up relevant installed formatter extensions and format the whole document on each save.

Enable "Format On Save" by setting

"editor.formatOnSave": true

And there are available keyboard shortcuts (Visual Studio Code 1.7 and above):

Format the whole document: Shift + Alt + F

Format Selection only: Ctrl + K, Ctrl + F

Solution 7 - Code Formatting

On Linux it is Ctrl + Shift + I.

On Windows it is Alt + Shift + F. Tested with HTML/CSS/JavaScript and Visual Studio Code 1.18.0.

For other languages, you might need to install a specific language package.

Solution 8 - Code Formatting

For Fedora

Click File -> Preferences -> Keyboard shortcuts.
Under Default Keyboard Shortcuts, search (Ctrl + F) for editor.action.format.

Mine read "key": "ctrl+shift+i"

You can change it as well. Refer to this answer on how to... or if you are feeling a little lazy to scroll up:

> You can add a keybinding in "Preferences->Keyboard shortcuts" > >{ "key": "cmd+k cmd+d", "command": "editor.action.format" } > >Or Visual Studio like: > >{ "key": "ctrl+k ctrl+d", "command": "editor.action.format" }

Please note: cmd key is only for Macs. For Windows and Fedora (Windows keyboard) use Ctrl

EDIT:

As per Visual Code version 1.28.2 this is what I found.

editor.action.format no longer exists. It has now been replaced by editor.action.formatDocument and editor.action.formatSelection.

Type editor.action.format in the search box to view existing shortcuts.

To change the key combinations follow these steps:

Click editor.action.formatDocument or editor.action.formatSelection
A pen like icon appears to the left - click it.
A pop-up appears. Press the desired key combination and press enter.

Solution 9 - Code Formatting

On Ubuntu it's Ctrl + Shift + I.

Solution 10 - Code Formatting

Menu File → Preferences → Settings

"editor.formatOnType": true

When you enter the semicolon, it's going to be formatted.

Alternatively, you can also use "editor.formatOnSave": true.

Solution 11 - Code Formatting

Just right-click on the text and select "Format code".

Visual Studio Code uses js-beautify internally, but it lacks the ability to modify the style you wish to use. The extension "beautify" lets you add settings.

Solution 12 - Code Formatting

Shift + Alt + F does the job just fine in 1.17.2 and above.

Solution 13 - Code Formatting

For some reason Alt + Shift + F didn't work for me on Mac Visual Studio Code 1.3.1, and actually the command "Format Document" don't worked at all. But command Formatter worked very well.

So you can use Command + Shift + P and type Formatter or make your own shortcut in menu File → Preferences → Keyboard Shortcuts → Command + K Command + S then type Formatter and add your shortcut.

See an example:

Solution 14 - Code Formatting

Formatting code in Visual Studio.

I have tried to format in Windows 8.

Just follow the screenshots below.

Click on View on the top menu bar, and then click on Command Palette.
Then a textbox would appear where we need type Format

Shift + Alt + F

Solution 15 - Code Formatting

In Visual Studio Code, Shift+Alt+F is doing what Ctrl+K+D is doing in Visual Studio.

Solution 16 - Code Formatting

The simplest way I use in Visual Studio Code (Ubuntu) is:

Select the text which you want to format with the mouse.

Right click and choose "Format selection".

Solution 17 - Code Formatting

On Mac, Shift + Alt + F works for me.

You can always check the key bindings in the menu:

Menu File → Preferences → Keyboard Shortcuts and filter by keyword 'format'.

Solution 18 - Code Formatting

The format shortcut in C# didn't work for me until I installed Mono for Mac OS X, DNVM and DNX.

Before I installed Mono, the auto-format shortcut (Shift + Alt + F) worked only for the .json files.

Solution 19 - Code Formatting

While changing the default behavior for Visual Studio Code requires an extension, you may override the default behavior in the workspace or user level. It works for most of the supported languages (I can guarantee HTML, JavaScript, and C#).

##Workspace level

Benefits

Does not require an extension
Can be shared among teams

Outcomes

.vscode/settings.json is created in the project root folder

How To?

Go to: Menu File → Preferences → Workspace Settings
Add and save "editor.formatOnType": true to settings.json (which overrides default behavior for the project you work on by creating .vscode/settings.json file).

##User environment level

Benefits

Does not requires extension
Personal development environment tweeking to rule them all (settings:))

Outcomes

User's settings.json is modified (see location by operating system below)

How To?

Go to: menu File → Preferences → User Settings
Add or change the value of "editor.formatOnType": false to "editor.formatOnType": true in the user settings.json

Your Visual Studio Code user's settings.json location is:

Settings file locations depending on your platform, the user settings file is located here:

Windows: %APPDATA%\Code\User\settings.json
Mac: $HOME/Library/Application Support/Code/User/settings.json
Linux: $HOME/.config/Code/User/settings.json The workspace setting file is located under the .vscode folder in your project.

More details may be found here.

Solution 20 - Code Formatting

By default, this key was not working for me on HTML, CSS, and JavaScript documents.

After searching, I found the popular plugin JS-CSS-HTML Formatter with 133,796 installs.

After installation, just reload the windows and hit Ctrl + Shift + F, and it works!

Solution 21 - Code Formatting

Select the text, right click on the selection, and select the option "command palette":

A new window opens. Search for "format" and select the option which has formatting as per the requirement.

Solution 22 - Code Formatting

Just install Visual Studio Keymap (Visual Studio Keymap for Visual Studio Code) by Microsoft. Problem Solved. :p

Solution 23 - Code Formatting

For those that want to customize what JavaScript files to format, you can use the any extension on the JSfiles property. The same applies to HTML.

{
    "beautify.onSave": true,
    "beautify.JSfiles": ["js", "json", "jsbeautifyrc", "jshintrc", "ts"],
    "beautify.HTMLfiles": ["htm", "html"]
}

This will enable beautify on save for TypeScript, and you can add in XML to the HTML option.

Solution 24 - Code Formatting

You have to install the appropriate plug-in first (i.e., XML, C#, etc.).

Formatting won't become available until you've installed the relevant plugin, and saved the file with an appropriate extension.

Solution 25 - Code Formatting

In Mac, use ⌘+K and then ⌘+F.

Solution 26 - Code Formatting

If you want to custom the style of format-document, you should use Beautify extention.

Refer to this screenshot:

Solution 27 - Code Formatting

Not this one. Use this:

Menu File → Preferences → Workspace Settings, "editor.formatOnType": true

Solution 28 - Code Formatting

Visual Studio Code on Linux:

Ctrl + [ to unindent block of code and

Ctrl + ] to make a mass indentation

Solution 29 - Code Formatting

Use extension...

Enables auto formatting of the code when you save a file.

Launch Visual Studio Code and Quick Open (Ctrl + P), paste the following command, and press Enter.

> ext install format-on-save

https://marketplace.visualstudio.com/items?itemName=gyuha.format-on-save

Content Type	Original Author	Original Content on Stackoverflow
Question	Brandon Clapp	View Question on Stackoverflow
Solution 1 - Code Formatting	Brandon Clapp	View Answer on Stackoverflow
Solution 2 - Code Formatting	Bharathi Devarasu	View Answer on Stackoverflow
Solution 3 - Code Formatting	hardkoded	View Answer on Stackoverflow
Solution 4 - Code Formatting	Siddarth Kanted	View Answer on Stackoverflow
Solution 5 - Code Formatting	César	View Answer on Stackoverflow
Solution 6 - Code Formatting	Dariusz	View Answer on Stackoverflow
Solution 7 - Code Formatting	Niklas Rosencrantz	View Answer on Stackoverflow
Solution 8 - Code Formatting	abyshukla	View Answer on Stackoverflow
Solution 9 - Code Formatting	ranbuch	View Answer on Stackoverflow
Solution 10 - Code Formatting	M Fatih Koca	View Answer on Stackoverflow
Solution 11 - Code Formatting	Gerfried	View Answer on Stackoverflow
Solution 12 - Code Formatting	Piotrek Hryciuk	View Answer on Stackoverflow
Solution 13 - Code Formatting	Aleksander Tymczenko	View Answer on Stackoverflow
Solution 14 - Code Formatting	afeef	View Answer on Stackoverflow
Solution 15 - Code Formatting	Burk	View Answer on Stackoverflow
Solution 16 - Code Formatting	Ashutosh Jha	View Answer on Stackoverflow
Solution 17 - Code Formatting	Lukasz Czerwinski	View Answer on Stackoverflow
Solution 18 - Code Formatting	Jo Smo	View Answer on Stackoverflow
Solution 19 - Code Formatting	Roi Shabtai	View Answer on Stackoverflow
Solution 20 - Code Formatting	mumair	View Answer on Stackoverflow
Solution 21 - Code Formatting	Akhil Ghatiki	View Answer on Stackoverflow
Solution 22 - Code Formatting	Rudy	View Answer on Stackoverflow
Solution 23 - Code Formatting	Rick	View Answer on Stackoverflow
Solution 24 - Code Formatting	Nigel Feasey	View Answer on Stackoverflow
Solution 25 - Code Formatting	Gopal Devra	View Answer on Stackoverflow
Solution 26 - Code Formatting	Jerry Ni	View Answer on Stackoverflow
Solution 27 - Code Formatting	杨恩锋	View Answer on Stackoverflow
Solution 28 - Code Formatting	Hvitis	View Answer on Stackoverflow
Solution 29 - Code Formatting	Gyuha Shin	View Answer on Stackoverflow