How do you format code on save in VS Code

visual-studio-code vscode-settings code-formatting
Tomas Nikodym picture Tomas Nikodym · Sep 14, 2016 · Viewed 145.6k times · Source

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

Tomas Nikodym picture Tomas Nikodym · Oct 11, 2016

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

Add the following to your settings.json file: 

"editor.formatOnSave": true

Related questions

How to set Python language specific tab spacing in Visual Studio Code?

Using VSCode 1.9.0 with the (donjayamanne) Python 0.5.8 extension, is it possible to provide Python specific editor options? Or more generally speaking, is it possible to provide language specific tab spacing and replacement rules? For example, Python should be tab=4 spaces (replaced …

Read More
How can I customize the tab-to-space conversion factor?

How do I customize the tab-to-space conversion factor when using Visual Studio Code? For instance, right now in HTML it appears to produce two spaces per press of TAB, but in TypeScript it produces 4.

Read More
How do I use Bash on Windows from the Visual Studio Code integrated terminal?

Visual Studio Code on Windows uses PowerShell by default as the integrated terminal. If you want to use Bash from Visual Studio Code, what steps should be followed?

Read More