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.

Answer 1

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

Add the following to your settings.json file:

"editor.formatOnSave": true

Answer 2

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.

1. Open Settings by pressing [Cmd+,] in Mac (or [Ctrl+,] in Windows/Linux) or using the below screenshot.

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

You are done. Thank you.