Visual studio code auto format html on save

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.

Gama11

29.3k9 gold badges69 silver badges93 bronze badges

asked Sep 14, 2016 at 15:26

Tomas NikodymTomas Nikodym

11.9k3 gold badges18 silver badges18 bronze badges

1

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

Add the following to your settings.json file:

"editor.formatOnSave": true

Gama11

29.3k9 gold badges69 silver badges93 bronze badges

answered Oct 11, 2016 at 8:39

Tomas NikodymTomas Nikodym

11.9k3 gold badges18 silver badges18 bronze badges

8

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 using the below screenshot.

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

You are done. Thank you.

answered Feb 13, 2019 at 7:54

Balasubramani MBalasubramani M

6,9842 gold badges43 silver badges46 bronze badges

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 }

answered May 31, 2018 at 5:36

1

For eslint:

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

answered Dec 11, 2020 at 23:12

Dmitry GrinkoDmitry Grinko

12k12 gold badges54 silver badges74 bronze badges

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

answered May 2, 2021 at 7:08

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
}

abraham

44.9k10 gold badges94 silver badges143 bronze badges

answered Sep 27, 2018 at 7:39

RichardRichard

2,01617 silver badges17 bronze badges

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

1. Install this extension

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

1. Add below json, to below file:

File:

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

answered Jan 14 at 10:40

3

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 at 6:43

chanteychantey

2,54722 silver badges27 bronze badges

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.

answered Sep 3 at 9:52

AnderAnder

4,6256 gold badges38 silver badges62 bronze badges

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.

answered May 24 at 6:35

ArashMadArashMad

1281 silver badge5 bronze badges

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 8 at 8:05

Goto settings and search format
check Editor: Format On Save

or follow these steps

answered Sep 15 at 11:23

Rasel KhanRasel Khan

1,95715 silver badges20 bronze badges

How do I automatically format code in Visual Studio Code?

How do I get automatic HTML code in Visual Studio?

How do I enable HTML suggestions in Visual Studio Code?