I've gone through formatting settings and stack overflow posts, I've toggled with a bunch of different settings and can't seem to find an answer to this. Nothing in settings.json seems to matter, maybe it's being overwritten somehow?

My tab spacing is set at 2 spaces and every time I restart my computer, something seems to happen to VS Code where saving a file adds a ton of weird spacing rules and tabs to 4 spaces, as you can see in the gif below that make my code terrible.

I don't want to go back to Atom or Sublime but the way VS Code is working for me right now, I can't use it in a professional context. Would love some help getting this figured out.

Thanks!

(image below is a gif, click it to see the style change on save)

Edit: installed packages in VS Code:

I've gone through formatting settings and stack overflow posts, I've toggled with a bunch of different settings and can't seem to find an answer to this. Nothing in settings.json seems to matter, maybe it's being overwritten somehow?

My tab spacing is set at 2 spaces and every time I restart my computer, something seems to happen to VS Code where saving a file adds a ton of weird spacing rules and tabs to 4 spaces, as you can see in the gif below that make my code terrible.

I don't want to go back to Atom or Sublime but the way VS Code is working for me right now, I can't use it in a professional context. Would love some help getting this figured out.

Thanks!

(image below is a gif, click it to see the style change on save)

Edit: installed packages in VS Code:

• javascript
• visual-studio-code

• 1 VS Code shouldn't do that on its own - do you have any beautifier extensions enabled? – Sarah Groß Commented Apr 23, 2019 at 13:05
• 1 This will help you. You need to remove Format on Save – Vencovsky Commented Apr 23, 2019 at 13:08
• iF you press ctrl + , or cmd + , on mac I think, and go down to Text Editor, do you have 'Auto Indent' selected? – Jabberwocky Commented Apr 23, 2019 at 13:08
• does it happen when you save the file? – kemotoe Commented Apr 23, 2019 at 13:09
• @kemotoe yes it does – Zack Shapiro Commented Apr 23, 2019 at 13:10

5 Answers 5

This comment turns out to have the answer. It happens when you have two settings that shouldn't conflict but do for some reason

"editor.formatOnSave": false,
"javascript.format.enable": false

The solution was to uninstall vscode-JS-CSS-HTML-formatter which you can do by searching for the author, lonefy, in your packages.

I found the solution. It's not Prettier, its "JS-CSS-HTML Formatter" Just uninstall "JS-CSS-HTML Formatter" extension, then reload vscode, and it's done. Also, no need to disable auto-format on save.

Its probably Prettier that is doing this.

In your settings.json add these two lines:

"editor.formatOnSave": false,

"prettier.disableLanguages": [
    "jsx",
    "js"
],

Or just uninstall prettier

its so simple just uninstall Prettier extensions that you have install. Press Extension Tab on your left sidebar (shift command X on mac) and choose your Prettier extension and uninstall it.

Looks like prettier formats your code. Check your settings.

Format On Save

Respects editor.formatOnSave setting.

You can turn on format-on-save on a per-language basis by scoping the setting:

// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
"editor.formatOnSave": true
}