How do you format code on save in VS Code

Question

I would like to automatically format TypeScript code using the build-in formatter when I save a file in Visual Studio Code.

I'm aware of the following options, but none of them is good enough:

Format manually Shift + Alt + F
Format on type "editor.formatOnType": true
- It formats the line when you press enter. Unfortunatelly, it leaves it unformatted when you mouse-click another line or press up/down arrow.
Use existing extension
- I tried this one, but it does not seem to work too well.
Use beautify "beautify.onSave": true
- It does not work with TypeScript
Write custom extension
- It's tricky if you want to handle autosaves and builds correctly.

score 389 · Accepted Answer · edited Mar 30 '19 at 12:59

389

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

Add the following to your settings.json file:

"editor.formatOnSave": true

edited Mar 30 '19 at 12:59

Gama11

24,825
7
56
81

answered Oct 11 '16 at 08:39

Tomas Nikodym

8,782
3
15
17

7

is there a way to exclude some files? i.e I want to only format .js files not .html files. – gabrielAnzaldo Jun 27 '17 at 14:57
@gabodev77prettier in VS Code has options for this (e.g. prettier.javascriptEnable, prettier.cssEnable...) though not for HTML. – Freewalker Sep 28 '17 at 18:07
12

Can it format on Autosave? formatOnSave is working for me only when I manually hit Cmd+S. – Freewalker Sep 28 '17 at 18:07
1

@gabrielAnzaldo See this question for how to exclude certain files / file types: https://stackoverflow.com/questions/44831313/how-to-exclude-files-from-format-on-save-in-vscode/44831631 – Gama11 Mar 30 '19 at 13:01
1

@LukeWilliams This is currently not possible, there's a feature request for it here: https://github.com/microsoft/vscode/issues/45997 – Gama11 Jan 02 '20 at 11:34
I don't want it too format on Autosave anymore actually (2 years later)... setting up cmd+s as well as format-on-commit (with Husky and lint-staged) works perfectly and ensures that nothing unformatted gets checked in. Thanks for the info though @Gama11! – Freewalker Jan 02 '20 at 15:46
Personally I do want the format on autosave - a shame the issue got closed by a bot without a satisfactory explanation :-( – Steve Chambers Jan 13 '21 at 15:19
To have this only work for C#: "[csharp]": { "editor.formatOnSave": true }, – Dirk R Feb 15 '21 at 12:20

score 89 · Answer 2 · edited Mar 30 '19 at 12:57

89

To automatically format code on save:

Press Ctrl , to open user preferences
Enter the following code in the opened settings file
```
{
    "editor.formatOnSave": true
}
```
Save file

Source

edited Mar 30 '19 at 12:57

Gama11

24,825
7
56
81

answered Dec 15 '17 at 06:33

Zameer Ansari

23,672
19
120
191

A note from VS Code's own documentation on this feature, for those who try out this answer but are disappointed when nothing happens: "A formatter must be available, ***the file must not be saved after delay,*** and the editor must not be shutting down". Way to make this feature NOT work with one of VS Code's most useful default behaviours, Microsoft... – eriegz Jan 29 '21 at 16:00

score 70 · Answer 3 · answered Feb 13 '19 at 07:54

No need to add commands anymore. For those who are new to Visual Studio Code and searching for an easy way to format code on saving, kindly follow the below steps.

Open Settings by pressing [Cmd+,] in Mac or using the below screenshot.

Type 'format' in the search box and enable the option 'Format On Save'.

You are done. Thank you.

Long Nguyen · Answer 4 · 2021-04-07T11:13:06.200

51

If you would like to auto format on save just with Javascript source, add this one into Users Setting (press CmdShiftP or CtrlShiftP then type Open Settings (JSON) to open settings.json file)

"[javascript]": { "editor.formatOnSave": true }

edited Apr 07 '21 at 11:13

answered May 31 '18 at 05:36

Long Nguyen

6,008
3
36
41

my version, i started searching "formatOnSave" and just had to click a checkbox in the Vs Code Settings UI – Akin Hwan Aug 11 '19 at 12:56

score 5 · Answer 5 · edited Dec 29 '18 at 17:09

For MAC user, add this line into your Default Settings

File path is: /Users/USER_NAME/Library/Application Support/Code/User/settings.json

"tslint.autoFixOnSave": true

Sample of the file would be:

{
    "window.zoomLevel": 0,
    "workbench.iconTheme": "vscode-icons",
    "typescript.check.tscVersion": false,
    "vsicons.projectDetection.disableDetect": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "eslint.autoFixOnSave": true,
    "tslint.autoFixOnSave": true
}

score 2 · Answer 6 · answered Dec 11 '20 at 23:12

2

For eslint:

"editor.codeActionsOnSave": { "source.fixAll.eslint": true }

answered Dec 11 '20 at 23:12

Dmitry Grinko

8,671
12
35
63

score 1 · Answer 7 · answered May 02 '21 at 07:08

1

For neet formatting for any language you can use Prettier - code formatter. After applying this you can format code Alt + Shift + f

answered May 02 '21 at 07:08

Supun Sandaruwan

171
4
8

How do you format code on save in VS Code

7 Answers7

To automatically format code on save:

Linked