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

Question

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?

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_](https://marketplace.visualstudio.com/items?itemName=DotJoshJohnson.xml#review-details) to get the job done just fine. _Disclaimer: I am not the author nor related to this project..._ — informatik01, Jun 01 '16 at 21:32
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. — Roland, Feb 17 '17 at 09:23
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. — Mr.Hunt, Nov 16 '17 at 06:04

score 5533 · Accepted Answer · edited Dec 01 '22 at 16:09

5533

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

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'

edited Dec 01 '22 at 16:09

Roland

4,619
7
49
81

answered Apr 30 '15 at 16:43

Brandon Clapp

66,931
6
20
24

41

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) – Stephen Price Oct 02 '15 at 02:03
5

@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. – Asheesh Jan 05 '16 at 05:08
20

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. – Jonas Apr 06 '16 at 12:55
11

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: https://github.com/Microsoft/vscode/issues/8914#issuecomment-245947844 – Chris Adams Sep 09 '16 at 15:31
2

In current version of VSCode (1.8.1) there's action in Command + P menu "Format document" and it's available also in context menu on file contents - but only for supported types of documents. – mrówa Jan 04 '17 at 13:13
I am trying VSCode right now, it is very slow to format the codes in my project, around 6 seconds. I don't know what's wrong here. The file that i am trying to format is around 4k lines. If i am using PHPStorm IDE, the format happens instantly. – HendraWD Sep 14 '17 at 09:37
10

This doesn't work for me on VS Code latest version and win 10 does this assume having a certain extension installed? – Jay Oct 05 '17 at 18:35
Useful for me as a beginner to VSCode. Command + P is not working in VS 1.19.3 on Mac OS X 10.13.3. But Command + Shift + P - Format Document is working fine. Also Shift + Opt + F works fine. – SelvamSankarans Feb 02 '18 at 06:18
1

`Shift` + `Alt` + `F` is messing up with `'`. After pressing this combination, the `'` are changed to `"`, which is causing error in typescript. – mmushtaq May 01 '18 at 06:43
Nope for me on 1.34.0 with a piece of hcl and the Terraform plugin installed. I love my vi. – volvox May 31 '19 at 07:00
1

It used to work pretty well but now VSCode says "There is no formatter for 'plaintext'-files installed" – Ondra Starenko Jun 19 '19 at 10:39
1

Note that VS Code will not allow you to format large files but instead of telling you that will just offer the generic message "no formatter installed" – Andrew Fogg Jul 08 '19 at 20:08
3

If you want to change the default formatter you can do it like this: Open a file -> Right click on the code window -> Select `Format Document With...` -> `Configure Default Formatter...` -> Pick a new formatter. – Simon Hutchison Jul 30 '19 at 04:57
I noticed when you bring out the command search, there are "Format Document" and "Reindent Lines" and "Format Document" reindent better (if in my source code, I commented out `setTimeout(function() {` and the `}, 1000);` a few lines below, then "Reindent Lines" treat this comment as really opening up a block scope, but then also did not close the commented out closing `}` – nonopolarity Feb 02 '20 at 13:27
For Mac, shift + option + F is search menu. This is not correct, at least for Mac. – london_utku Apr 07 '20 at 17:53
1

Does not work with JSON unless the file has a ```.json``` extension. – Philip Rego May 27 '20 at 20:48
2

Can you ***add*** something to your answer about the conditions under which this works? For instance, it does *not* work (nothing happens) by default for C# (.cs) - tried on Linux (Ubuntu MATE 20.04 with Visual Studio Code 1.41.1, 2020-05-14). Whereas it worked for an HTML (.html) file on the same system. – Peter Mortensen Jun 12 '20 at 23:44
Possible solution for C# in: *[Visual Studio Code doesn't format C# code](https://stackoverflow.com/questions/47352611/visual-studio-code-doesnt-format-c-sharp-code/47352891#47352891)* – Peter Mortensen Jun 13 '20 at 11:20
1

As this is the accepted answer to a locked question that is effectively a canonical question (many people looking for formatting C#, PHP, CSS, and other languages in Visual Studio Code will end up here), it deserves a more comprehensive answer. – Peter Mortensen Jun 13 '20 at 11:46
Under help, there is keyboard shortcut reference which points to a website with the shortcuts including this one. – Timo Oct 23 '20 at 17:16
2

@BrandonClapp How can I apply a formatter to a file that is not necessarily meant for that formatter? I am learning how to program in `Q#` in VS Code, and when I press `shift+alt+f` and look to install a `Q#` formatter, there is none found. So, I installed `Csharpier` to try and format my `Q#` scripts like `C#` scripts, but I cannot get it to apply the formatting. Do you know how to do this? – Muhy Dec 24 '21 at 12:30
Bumping this, as none of the solutions here are able to reformat C# code, to not put `{` on a new line. Any ideas what extensions are able to do this, since there are none found in the default/recommended C# extension? – not2qubit Nov 02 '22 at 01:39
helpful answer for web developers since they have lots of
, lolz
– Mr.Javed Multani Feb 20 '23 at 18:20

score 551 · Answer 2 · edited Apr 24 '19 at 16:26

551

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.

edited Apr 24 '19 at 16:26

Peter Mortensen

30,738
21
105
131

answered May 25 '16 at 06:25

Bharathi Devarasu

7,759
2
18
23

Also works for another language with this: [Beautify Extension](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify) – equiman Aug 19 '16 at 12:47
3

not sure why it's different in CentOS, but it's `Shift + Alt + I` – a11smiles Jan 24 '17 at 15:59
2

beautify.onSave is not valid with the eslint extention installed – Ben Petersen May 31 '17 at 17:36
On ubuntu mate 17.04 it `Shift + Alt + I` too – Pini Cheyni Sep 13 '17 at 10:10
2

@ClintEeastwood try using `prettier.singleQuote: true` in your vs code settings. – Enn May 22 '18 at 06:29
for Mac should be `Shift + Option + F` – Haydar Ali Ismail Jun 17 '18 at 06:12
Oddly this feature appears to only function with explicit saves. In other words, auto save feature does not also trigger beautification. – P.Brian.Mackey Sep 07 '18 at 13:26
3

Can't find 'Workplace Settings', just 'File' > 'Preferences' > 'Settings'. – Tola Odejayi Mar 07 '19 at 20:58
@TolaOdejayi If you are using Mac OS go to Code --> Preference --> Settings --> Workspace Settings ( Tab Navigation) – Bharathi Devarasu Mar 10 '19 at 08:41
I don't see `Preference --> Settings --> Workspace Settings` in Windows ? – Shaiju T Sep 07 '20 at 12:06
1

@shaijut it is located at `File --> Preference --> Settings` and then under the search bar you see `User` then to the right it says `Workspace` – Mark van der Dam Sep 23 '20 at 14:42
How can I apply a formatter to a file that is not necessarily meant for that formatter? I am learning how to program in `Q#` in VS Code, and when I press `shift+alt+f` and look to install a `Q#` formatter, there is none found. So, I installed `Csharpier` to try and format my `Q#` scripts like `C#` scripts, but I cannot get it to apply the formatting. Do you know how to do this? – Muhy Dec 24 '21 at 12:32

score 238 · Answer 3 · edited Jul 09 '21 at 17:40

238

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

edited Jul 09 '21 at 17:40

Josh Correia

3,807
3
33
50

answered Feb 13 '18 at 10:34

Siddarth Kanted

5,738
1
29
20

20

For Linux the keyboard shortcuts are Ctlr + Shift + I – Lucas May 27 '19 at 07:34
Thanks, this is helpful when my default formater is linked to a wrong one. You will saw an extra option "Format document with ..." – BMW Sep 13 '21 at 07:02

score 232 · Answer 4 · edited Feb 28 '19 at 08:54

232

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

edited Feb 28 '19 at 08:54

Peter Mortensen

30,738
21
105
131

answered May 01 '15 at 13:49

hardkoded

18,915
3
52
64

26

In Windows, replace `cmd` with `ctrl` - don't just blindly copy and paste like I did! – Jens Ehrich Sep 11 '15 at 16:52
3

"editor.action.format" is working again. It now formats the whole document if nothing is selected, else formats the selection. – Red Riding Hood Dec 10 '16 at 15:28

score 124 · Answer 5 · edited Feb 28 '19 at 08:57

124

The right key combination is Shift + Alt + F.

edited Feb 28 '19 at 08:57

Peter Mortensen

30,738
21
105
131

answered Jul 09 '15 at 10:57

César

1,341
1
8
7

2

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. – Beauty Sep 27 '16 at 16:16
This shortcut works for MAC. In Windows it formats the code. – C. Damoc May 16 '19 at 10:19
Shortcut keys are different for different operating systems, For Linux its `Ctrl` + `Shift` + `I` – Hamza Khanzada Feb 25 '21 at 11:17

score 81 · Answer 6 · edited Apr 24 '19 at 16:56

81

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

edited Apr 24 '19 at 16:56

Peter Mortensen

30,738
21
105
131

answered Oct 28 '16 at 07:26

Dariusz

15,573
9
52
68

2

I suggest EsLint extension for VS Code https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint – Dariusz May 20 '18 at 21:51
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. – Vandan Revanur Feb 22 '23 at 15:38

score 69 · Answer 7 · edited Feb 28 '19 at 08:57

69

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.

edited Feb 28 '19 at 08:57

Peter Mortensen

30,738
21
105
131

answered Sep 11 '15 at 08:36

Niklas Rosencrantz

25,640
75
229
424

score 66 · Answer 8 · edited Jun 20 '20 at 09:12

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.

With this command,in my TypeScript files, single quote becomes double quote. How to solve that? — DioBrando, Jan 16 '19 at 14:20
@DioBrando, you might want to check the TypeScript formatting extension you use. — abyshukla, Jun 30 '21 at 15:33

score 48 · Answer 9 · edited Feb 28 '19 at 09:04

48

On Ubuntu it's Ctrl + Shift + I.

edited Feb 28 '19 at 09:04

Peter Mortensen

30,738
21
105
131

answered Dec 13 '15 at 06:57

ranbuch

1,584
16
14

8

I guess it depends on the language. `CTRL + SHIFT + I` works for JavaScript but not for PHP, for example. – Jamie Carl Mar 18 '16 at 00:05

score 44 · Answer 10 · edited Aug 07 '19 at 13:04

44

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.

edited Aug 07 '19 at 13:04

rotgers

1,992
1
15
25

answered Feb 01 '18 at 06:52

M Fatih Koca

581
5
5

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! – default_noob_network Feb 21 '18 at 21:24
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. – Daniel Jackson Feb 20 '19 at 21:44

score 37 · Answer 11 · edited Apr 24 '19 at 16:55

37

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.

edited Apr 24 '19 at 16:55

Peter Mortensen

30,738
21
105
131

answered Sep 30 '16 at 11:15

ESP32

8,089
2
40
61

1

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. – ESP32 Oct 27 '16 at 07:26
1

This is the extension: https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify – Highmastdon May 03 '17 at 13:54

score 28 · Answer 12 · edited Apr 24 '19 at 17:08

28

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

edited Apr 24 '19 at 17:08

Peter Mortensen

30,738
21
105
131

answered Oct 19 '17 at 10:40

Piotrek Hryciuk

785
10
23

score 26 · Answer 13 · edited Apr 24 '19 at 17:07

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:

score 26 · Answer 14 · edited Apr 24 '19 at 17:14

26

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

edited Apr 24 '19 at 17:14

Peter Mortensen

30,738
21
105
131

answered Feb 09 '18 at 09:03

afeef

4,396
11
35
65

1

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! – user3885927 Aug 09 '19 at 16:28

score 24 · Answer 15 · edited Apr 24 '19 at 16:23

24

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

edited Apr 24 '19 at 16:23

Peter Mortensen

30,738
21
105
131

answered Jun 28 '15 at 16:42

Burk

2,969
1
23
24

score 23 · Answer 16 · edited Jun 13 '20 at 11:56

23

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

edited Jun 13 '20 at 11:56

Peter Mortensen

30,738
21
105
131

answered May 24 '17 at 09:07

Ashutosh Jha

15,451
11
52
85

"Format selection" doesn't exist as option – Martijn Hiemstra Oct 26 '22 at 07:56
@MartijnHiemstra I am using MAC , this option is there too . Which OS you are using ? – Ashutosh Jha Nov 03 '22 at 12:06

score 20 · Answer 17 · edited Apr 24 '19 at 17:10

20

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

edited Apr 24 '19 at 17:10

Peter Mortensen

30,738
21
105
131

answered Jan 08 '18 at 10:06

Lukasz Czerwinski

13,499
10
55
65

On my M1 Mac, I don't see an `alt` key – staticvoid17 Oct 30 '21 at 05:22

score 19 · Answer 18 · edited Feb 28 '19 at 09:04

19

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.

edited Feb 28 '19 at 09:04

Peter Mortensen

30,738
21
105
131

answered Nov 02 '15 at 14:18

Jo Smo

6,923
9
47
67

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. – Oncel Umut TURER Dec 08 '17 at 08:57

score 16 · Answer 19 · edited Apr 24 '19 at 16:50

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.

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? — Peter Mortensen, Jun 13 '20 at 11:38

score 10 · Answer 20 · edited Jun 13 '20 at 11:40

10

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!

edited Jun 13 '20 at 11:40

Peter Mortensen

30,738
21
105
131

answered Jan 09 '17 at 18:16

mumair

2,768
30
39

1

Yeah, but only 2 out of 5 stars? Seriously? – kmoser Mar 24 '20 at 02:37
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. – mumair Mar 24 '20 at 09:49
1

I don't think VS Code yet supports formatting CSS out of the box. I installed the *Prettier* plugin (https://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. – kmoser Mar 24 '20 at 15:36
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 :) – mumair Mar 25 '20 at 16:47

score 10 · Answer 21 · edited Apr 24 '19 at 17:11

10

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.

edited Apr 24 '19 at 17:11

Peter Mortensen

30,738
21
105
131

answered Jan 18 '18 at 07:47

Akhil Ghatiki

1,140
12
29

score 9 · Answer 22 · edited Jun 13 '20 at 11:55

9

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

edited Jun 13 '20 at 11:55

Peter Mortensen

30,738
21
105
131

answered Jan 23 '17 at 15:41

Rudy

454
6
8

score 8 · Answer 23 · edited Apr 24 '19 at 16:53

8

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.

edited Apr 24 '19 at 16:53

Peter Mortensen

30,738
21
105
131

answered Sep 08 '16 at 20:34

Nigel Feasey

79
1
2

Beautify asks you if it doesn't know which formatter to use, allowing one to style cshtml. – Cees Timmerman Nov 07 '18 at 12:17
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 Jun 13 '20 at 11:59
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](https://stackoverflow.com/questions/47352611/visual-studio-code-doesnt-format-c-sharp-code/47352891#47352891)* – Peter Mortensen Jun 13 '20 at 11:59

score 7 · Answer 24 · edited Jun 01 '19 at 13:13

7

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.

edited Jun 01 '19 at 13:13

Gama11

31,714
9
78
100

answered Sep 03 '16 at 21:54

Rick

12,606
2
43
41

1

Where do I put this? It also helps to add that beautify is an extension... – rotgers Aug 07 '19 at 08:31
1

You **could** have mentioned where to put this code. – birgersp Oct 17 '19 at 12:37
1

@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)'`. – robalem Jul 01 '20 at 08:17

score 7 · Answer 25 · edited Apr 24 '19 at 16:54

7

Visual Studio Code on Linux:

Ctrl + [ to unindent block of code and

Ctrl + ] to make a mass indentation

edited Apr 24 '19 at 16:54

Peter Mortensen

30,738
21
105
131

answered Sep 20 '16 at 14:43

Hvitis

502
5
14

score 7 · Answer 26 · edited Dec 18 '17 at 14:13

7

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

edited Dec 18 '17 at 14:13

Mwiza

7,780
3
46
42

answered Jun 14 '17 at 11:54

Gopal Devra

787
9
15

Works! But before doing this, I changed the language to `JSON` from `Plain Text` using the status bar in the bottom right-hand corner. – amdg Sep 07 '21 at 14:03

score 6 · Answer 27 · edited Apr 24 '19 at 16:29

6

Not this one. Use this:

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

edited Apr 24 '19 at 16:29

Peter Mortensen

30,738
21
105
131

answered Jul 27 '16 at 03:37

杨恩锋

79
1
2

3

Not this one what? Are you referring to another answer? If yes, which one? – Peter Mortensen Apr 24 '19 at 16:29

score 6 · Answer 28 · answered Nov 01 '17 at 09:35

6

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

Refer to this screenshot:

answered Nov 01 '17 at 09:35

Jerry Ni

521
6
7

score 1 · Answer 29 · edited Apr 24 '19 at 16:31

1

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

edited Apr 24 '19 at 16:31

Peter Mortensen

30,738
21
105
131

answered Aug 17 '16 at 07:44

Gyuha Shin

151
1
6

2

link is dead- extension 404? – jordan.baucke Nov 14 '17 at 02:33

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

29 Answers29

For unsaved snippets

Unformat

'Show the pics'

Workspace level

User environment level

Linked

Related