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.

If you have the prettier extension installed. On windows press Alt + Shift + f or search @id:editor.defaultFormatter in the settings and choose prettier as the default formatter. — DevAB, Aug 12 '22 at 06:34

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

595

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

31,714
9
78
100

answered Oct 11 '16 at 08:39

Tomas Nikodym

13,210
3
19
18

9

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
17

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

@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
1

To have this only work for C#: "[csharp]": { "editor.formatOnSave": true }, – Dirk R Feb 15 '21 at 12:20
Don't forget to "Cmd+Shift+P" and "reload window" to apply the changes – Jack' Feb 06 '23 at 17:03

score 185 · Answer 2 · edited Oct 05 '22 at 03:53

185

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 [Ctrl+,] in Windows/Linux) or using the below screenshot.

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

You are done. Thank you.

edited Oct 05 '22 at 03:53

charlie arehart

6,590
3
27
25

answered Feb 13 '19 at 07:54

Balasubramani M

7,742
2
45
47

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

99

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

9,898
5
53
52

4

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 24 · Answer 4 · answered Dec 11 '20 at 23:12

24

For eslint:

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

answered Dec 11 '20 at 23:12

Dmitry Grinko

13,806
14
62
86

score 20 · Answer 5 · answered May 02 '21 at 07:08

20

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

1,814
19
19

Ander · Answer 6 · 2022-09-20T08:59:02.763

The best to avoid conflicts is defining individual formatters for each language, for instance if I am working with Rust and Typescript I would like to format code using the extensions Rust-Analyzer and Prettier respectively, therefore on my .vscode/settings.json:

{
  "editor.defaultFormatter": null,
  "[rust]": {
    "editor.defaultFormatter": "rust-lang.rust-analyzer",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

Remember that both Prettier and rust-analyzer extensions must be installed first.

score 6 · Answer 7 · 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 6 · Answer 8 · answered Nov 10 '22 at 21:48

6

If you use Prettier and this line

"editor.formatOnSave": true

Doesn't work to format on save, you might need to add another command to settings.json

"editor.defaultFormatter": "esbenp.prettier-vscode",

answered Nov 10 '22 at 21:48

Qui-Gon Jinn

3,722
3
25
32

2

thank you, "editor.defaultFormatter": "esbenp.prettier-vscode", helped me – Anna Vlasenko Jan 05 '23 at 03:34

Manohar Reddy Poreddy · Answer 9 · 2022-01-14T10:48:38.610

5

After hours of struggle... below steps worked.
Full details below.

Install this extension

https://marketplace.visualstudio.com/items?itemName=pucelle.run-on-save

Add below json, to below file:

File:

<your-project-directory>\.vscode\settings.json
    OR
%UserProfile%\AppData\Roaming\Code\User\settings.json

JSON:

NOTE: Make sure commas before and after below block.

    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "runOnSave.statusMessageTimeout": 3000,
    "runOnSave.commands": [
        {
            "match": ".*\\.*",
            "command": "editor.action.formatDocument",
            "runIn": "vscode"
        }
    ],

Now, when the code is changed, after 1 second, it gets formatted & saved automatically.

edited Jan 14 '22 at 10:48

answered Jan 14 '22 at 10:40

Manohar Reddy Poreddy

25,399
9
157
140

This actually worked quite well. To make this even better you can install [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) so formatting becomes cleaner instead of the default vs code formatter. I also changed the `runOnSave.statusMessageTimeout` to a bit more so it doesn't just interrupt your coding flow and formats it. – Rdimo Apr 05 '22 at 16:39
I meant `autoSaveDelay` instead of `statusMessageTimeout `, mb – Rdimo Apr 05 '22 at 17:00
Fun with vscode, after installing the extension and adding the two `runonsave` entries in setting, the autosave does not work anymore. But the autoformat works. Wait, it works, I had the delay with a high value, so plus one, although you should have been more detailed regarding the two key descriptions of `runonsave` – Timo Jun 09 '22 at 05:56

score 4 · Answer 10 · answered Jan 29 '22 at 06:43

4

For me formatOnSave wasn't working because I had prettier installed and hadn't yet chosen between the built-in and prettier as my default formatter.

To trigger the selection dialog I had to press Alt + Shift + f on my json file.

answered Jan 29 '22 at 06:43

chantey

4,252
1
35
40

score 1 · Answer 11 · answered Aug 08 '22 at 08:05

1

First, you need to choose the formatter which you have just added as an extension. Press ctrl + alt + f and choose the formatter that you want from the dropdown. Post that with every save it will get automatically formatted.

answered Aug 08 '22 at 08:05

Akshay Chavan

185
1
6

score 0 · Answer 12 · answered May 24 '22 at 06:35

In addition to enabling setting Format On Save, for python developers, you may need to install autopep8 package which is used by vscode as default to format the python code when the code is saved.

pip install autopep8

and then, press ctrl + s to see changes.

score 0 · Answer 13 · answered Sep 15 '22 at 11:23

0

Goto settings and search format
check Editor: Format On Save

or follow these steps

answered Sep 15 '22 at 11:23

Rasel Khan

2,976
19
25

How do you format code on save in VS Code

13 Answers13

Linked