Beautify on save in VS code?

Question

I just installed a beautify extension for vs code

I want to have my code beautified whenever I save a file, but can't figure out how to configure it that way.

It says

Beautify on save will be enabled when "editor.formatOnSave" is true.

But i have no idea where to put it exactly as I cannot find the default option in any of the files.

I'm trying to switch to VS code and figure things out.

Possible duplicate of [How do you format code on save in VS Code](https://stackoverflow.com/questions/39494277/how-do-you-format-code-on-save-in-vs-code) — Gama11, Apr 09 '19 at 11:28

score 41 · Answer 1 · edited Feb 13 '19 at 05:45

41

For Windows click on 'File' -> Preferences -> Settings. Then search for editor.formatOnSave, and put "true" instead of "false"

For Mac click on 'Code' (top left of screen, to the left of 'File', 'Edit', and 'View') -> Preferences -> Settings -> enter the term 'editor.formatOnSave' in the search settings box at the top of the page. Click on the tick to mark it as true.

edited Feb 13 '19 at 05:45

Tom M

802
2
7
21

answered Apr 11 '18 at 09:53

Mareks Zirdzins

619
4
9

https://i.imgur.com/CcscL2H.jpg Am i doing this right? It doesn't seem to work even after reloading vscode – UC3D Apr 11 '18 at 10:22
Not sure if it does anything. It doesn't beautify my code when i save a file like i want it to. – UC3D Apr 11 '18 at 10:31
I answered your initial question where to find the setting, so would appreciate +1 :), if you now have another question of why certain plugin doesn't work, I will need more details on that one. Screenshot or copy of the example 'ugly' code, and all steps how you enabled the plugin. – Mareks Zirdzins Apr 11 '18 at 10:41
It worked for me. Just open an html file and move an element out of place then save the file. The element gets moved back to where it should be. – Rich Mar 25 '19 at 14:08

score 1 · Answer 2 · answered Nov 24 '18 at 11:05

I visited this question because my beautify was not working in VS code And Adding the above mentioned setting fixed my issue but if you want your beautify to solve linting issue as well then you gonna have to added the below setting along with the above like this : (Hope this helps anyone)

{
  "editor.formatOnSave": true,
  "tslint.autoFixOnSave": true
  }

score 0 · Answer 3 · answered Feb 07 '21 at 03:04

0

My setup for Javascript relies on ESlint and Prettifier.

I got the autoformat/autofix configuring:

 "editor.codeActionsOnSaveTimeout": 2000,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }

answered Feb 07 '21 at 03:04

Kamafeather

5,651
10
44
74

Beautify on save in VS code?

3 Answers3

Linked