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

Question

This question's answers are a community effort . Edit existing answers to improve this post. It is not currently accepting new answers or interactions.

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?

• informatik01: For all those desperately trying to format XML (which seems not possible out of the box currently) you can achieve this by installing an extension. I have found XML Tools to get the job done just fine. Disclaimer: I am not the author nor related to this project...
• Roland Kwee: While VSCode has much fewer menu options than VS (new trend?), it has extensive info and tutorials under the HELP menu, which may have answered this question.
• Mr.Hunt: For all those struggling to get the formatting work even after trying the valid combinations in Visual Studio Code, don't forget to select the appropriate programming language type, it is at the bottom right in visual studio code window next to that smiley. Once you do that I found it works out of the box and you don't need any additional plugin to format code.

Answer 1

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 submenu View / Command Palette, also provided in the editor with Ctrl +Shift+ P (or Command + Shift + P on Mac), and then searching for format document.

For unsaved snippets

1. Open command palette (Win: F1 or Ctrl+Shift+P)

2. Find "Change Language Mode"

3. Select language e.g. json. By now syntax should be highlighted.

4. Format document (e.g. Open Command Palette -> "Format Document")

Unformat

1. Select text
2. Command Palette -> Join Lines

'Show the pics'

enter image description here enter image description here

• Stephen Price: Also note that the code Language has to be correct. ie Format Code won't be available if plain text is selected but switching to JSON (for example) will format the selected text happily. (as happy as a text editor can be anyway)
• Asheesh: @JoSmo: On Ubuntu, I opened File > Preferences > Keyboard Shortcuts. There is an item for { "key": "ctrl+shift+i", "command": "editor.action.format", "when": "editorTextFocus" }. The command "ctrl+shift+i" works for me.
• Jonas: Also, apparently the file has to be saved to disk first. I had a chunk of HTML+Javascript where it couldn't format the JS, so I pasted it to a temporary window and set the language, but this didn't help either until it was saved.
• Chris Adams: For the people saying it doesn't work on a Mac, this looks like a conflict between the shortcut and the OS X text input system for accented characters which depends on your configured locale and keyboard settings: github.com/Microsoft/vscode/issues/8914#issuecomment-245947844
• Jay: This doesn't work for me on VS Code latest version and win 10 does this assume having a certain extension installed?

Answer 2

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.

• a11smiles: not sure why it's different in CentOS, but it's Shift + Alt + I
• Ben Petersen: beautify.onSave is not valid with the eslint extention installed
• Enn: @ClintEeastwood try using prettier.singleQuote: true in your vs code settings.
• Tola Odejayi: Can't find 'Workplace Settings', just 'File' > 'Preferences' > 'Settings'.
• Mark van der Dam: @shaijut it is located at File --> Preference --> Settings and then under the search bar you see User then to the right it says Workspace

Answer 3

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

Enter image description here

• Lucas: For Linux the keyboard shortcuts are Ctlr + Shift + I
• BMW: Thanks, this is helpful when my default formater is linked to a wrong one. You will saw an extra option "Format document with ..."

Answer 4

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" }

• Jens Ehrich: In Windows, replace cmd with ctrl - don't just blindly copy and paste like I did!
• Red Riding Hood: "editor.action.format" is working again. It now formats the whole document if nothing is selected, else formats the selection.

Answer 5

The right key combination is Shift + Alt + F.

• Beauty: When you just copy&paste code from clipboard to a new tab, then nothing happens. Solution: Save the code to a file with a related file extension (e.g. *.json). Then it works. I suppose the reason is that the beautifyer knows the language from the extension and doesn't do an autodetect based on the code.
• C. Damoc: This shortcut works for MAC. In Windows it formats the code.
• Hamza Khanzada: Shortcut keys are different for different operating systems, For Linux its Ctrl + Shift + I

Answer 6

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

• Dariusz Tarczynski: I suggest EsLint extension for VS Code marketplace.visualstudio.com/…
• Vandan Revanur: How can this be coupled with autosave? If I make an edit, then it has to be autosaved and autoformatted. I am not able to figure out how to do this is on VS code.

Answer 7

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.

Answer 8

For Fedora

1. Click File -> Preferences -> Keyboard shortcuts.
2. 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:

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

• DioBrando: With this command,in my TypeScript files, single quote becomes double quote. How to solve that?
• Oliver Dixon: Can't seem to locate this in the new settings garbage UI.
• abyshukla: @DioBrando, you might want to check the TypeScript formatting extension you use.

Answer 9

On Ubuntu it's Ctrl + Shift + I.

• Jamie Carl: I guess it depends on the language. CTRL + SHIFT + I works for JavaScript but not for PHP, for example.

Answer 10

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.

• default_noob_network: oddly enough, i have found the behavior of this setting can be different than shift+alt+f in certain situations. don't know why though!
• Daniel Jackson: When I have this enable and I create a function in C#, I can complete the whole thing and move on yet the function isn't formatted until I do the "Format Document" feature. I don't know why the above setting doesn't format after typing a function.

Answer 11

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.

• ESP32: Sure, I am using Windows and it works as described - it might depend on VScode version (please update!) and on file extension. Please test with HTML.
• Highmastdon: This is the extension: marketplace.visualstudio.com/items?itemName=HookyQR.beautify

Answer 12

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

Answer 13

Formatting code in Visual Studio.

I have tried to format in Windows 8.

Just follow the screenshots below.

1. Click on View on the top menu bar, and then click on Command Palette.

   Enter image description here

2. Then a textbox would appear where we need type Format

   Shift + Alt + F

   Enter image description here

• user3885927: Some times I copy paste xml into a new file and want to format it without saving the file. This is perfect for such situations!

Answer 14

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:

Enter image description here

Answer 15

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

Answer 16

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".

• Martijn Hiemstra: "Format selection" doesn't exist as option
• Ashutosh Jha: @MartijnHiemstra I am using MAC , this option is there too . Which OS you are using ?

Answer 17

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'.

• staticvoid17: On my M1 Mac, I don't see an alt key

Answer 18

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.

• Oncel Umut TURER: In order to format C# one needs to install extensions. Normally omnisharp should work. However, there is a bug in omnisharp. Until the bug fixed we have to use Leopotam.csharpfixformat extension. It overrides omnisharp. After installing C# FixFormat extension I can format documents again.

Answer 19

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?

1. Go to: Menu File → Preferences → Workspace Settings

2. 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).

   How it looks

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?

1. Go to: menu File → Preferences → User Settings

2. 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.

• Peter Mortensen: But what is the consequence? How will it actually work after the change? Will it immediately / automatically change the formatting as something is typed? Also at paste?
• Roi Shabtai: @PeterMortensen Simply try it out and comment the answer

Answer 20

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

Enter image description here

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

Answer 21

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!

• kmoser: Yeah, but only 2 out of 5 stars? Seriously?
• mumair: Just a reminder: this answer was originally written in 2017 and that time VS Code functionality was pretty much functional via plugins or other hacks, none of other solutions worked for me that time so I discover it by myself which actually worked that time and did not cared how many stars it have :-) Now 2020 and formatting support is fantastic out of the box.
• kmoser: I don't think VS Code yet supports formatting CSS out of the box. I installed the Prettier plugin (prettier.io) which handles JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, YAML. 5.6 million installs and 4 stars.
• mumair: I am glad that you found prettier :P Formatting support is there but not good as prettier, I use prettier as dev-dependency in my all projects with .prettierrc and plugin. I am afraid that one day prettier will merge into vs-code :)

Answer 22

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

Answer 23

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.

• Cees Timmerman: Beautify asks you if it doesn't know which formatter to use, allowing one to style cshtml.
• Peter Mortensen: As this is the only answer that addresses the question many people looking for formatting C#, PHP, CSS, and other languages in Visual Studio Code have, it deserves more comprehensive content. (The question they have is: "Why doesn't this work???? All the answers here claim it does!")
• Peter Mortensen: I think the content should be in this answer (as an answer to a (locked) canonical question), but a possible solution for C# is in Visual Studio Code doesn't format C# code

Answer 24

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.

• rotgers: Where do I put this? It also helps to add that beautify is an extension...
• birgersp: You could have mentioned where to put this code.
• robalem: @gromit190 You should put it in the settings.json. Open the Command Palette (Windows: Ctrl+Shift+P. Mac: Cmd+Shift+P), and then enter 'Open Settings (JSON)'.

Answer 25

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

• amdg: Works! But before doing this, I changed the language to JSON from Plain Text using the status bar in the bottom right-hand corner.

Answer 26

Visual Studio Code on Linux:

Ctrl + [ to unindent block of code and

Ctrl + ] to make a mass indentation

Answer 27

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

Refer to this screenshot:

img

Answer 28

Not this one. Use this:

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

• Peter Mortensen: Not this one what? Are you referring to another answer? If yes, which one?

Answer 29

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

• jordan.baucke: link is dead- extension 404?