24

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.

JasonMArcher
  • 14,195
  • 22
  • 56
  • 52
UC3D
  • 383
  • 1
  • 3
  • 10
  • 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

5 Answers5

46

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.

enter image description here

Toms Code
  • 1,439
  • 3
  • 15
  • 34
Dave Anders
  • 799
  • 6
  • 13
  • 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. – Dave Anders 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
  • this does nothing for me – Devin McQueeney Dec 06 '21 at 17:18
4

Go to file--> preferences --> settings

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

enter image description here

Vivek Singh
  • 959
  • 7
  • 10
1

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
  }
Vignesh Pandi
  • 349
  • 1
  • 4
  • 15
0

My setup for Javascript relies on ESlint and Prettifier.

I got the autoformat/autofix configuring:

 "editor.codeActionsOnSaveTimeout": 2000,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
Kamafeather
  • 8,663
  • 14
  • 69
  • 99
0

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.

Digestible1010101
  • 81
  • 4