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.

Gubernatorial

Possible duplicate of How do you format code on save in VS Code – Eudosia

Answer 1

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.

Bequeath

i.imgur.com/CcscL2H.jpg Am i doing this right? It doesn't seem to work even after reloading vscode – Gubernatorial

Not sure if it does anything. It doesn't beautify my code when i save a file like i want it to. – Gubernatorial

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. – Bequeath

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. – Irrevocable

this does nothing for me – Bolinger

Answer 2

Go to file--> preferences --> settings

In search type formatter and in default formatter select : prettier code formatter as shown in below screenshot.

Revalue

Answer 3

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
  }

Holcombe

Answer 4

My setup for Javascript relies on ESlint and Prettifier.

I got the autoformat/autofix configuring:

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

Recede

Answer 5

In addition to the other answers, it may be that you have to override or replace your defaultFormatter settings in your settings.json file if you use other formatters.

When I installed Prettier, for example, it installed as the default formatter for several different languages, including HTML, which is broken for Django HTML templates.

Open settings.json file (SO guide if you get stuck

In my case, prettier had installed as default as follows, but you might have another formatter instead:

"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

If you remove esbenp.prettier-vscode and start typing a few characters, VScode will highlight in red you have entered an invalid formatter and suggest valid values. Once you have installed Beautify, you can replace this entry with: HookyQR.beautify

And make sure to follow the other answers on this post.

Nutgall