Beautify on save in VS code? - visual-studio-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.

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.

Answer 2

Go to file--> preferences --> settings
In search type formatter and in default formatter select : prettier code formatter as shown in below screenshot.

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
}

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
}

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.