visual-studio-codetabsformatting

VSCode: different tab size between save and format


I have set my tabs to spaces and set the tab-width to 2 of them. When I explicitly ask vscode to reformat my code (javascript) it does exactly what I expect. When I create a new line in my code, it auto-indents to 2-spaces too.

However, when I save (manually or automatically) the code is reformatted with 4-spaces!!!

It doesn't do this with yaml.

I believe I'm using prettier (because it says so in the status bar) a little distance from where it says Spaces: 2. In my settings.json it has this: "editor.tabSize": 2. I've also got this pretty little thing:

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

Which I think means that it's using prettier. It has the same formatter logged for yaml (and, in fact, almost everything else).

Can somebody tell me how to stop this annoying behaviour without having to lose the benefits of autosave?


Solution

    1. Please see, if .editorconfig exists in your project.
    [*.js]
    indent_style = space
    indent_size = 2
    
    "prettier.useEditorConfig": false
    
    1. Without using .editorconfig, I couldn't repeat your problem (i.e. tabSize configured = 2, reformats to 4). However the workaround would be:
    "editor.formatOnSave": false
    

    or even limit to javascript only:

    "[javascript]": { "editor.formatOnSave": false }
    

    That would preserve auto-saving functionality, but skip auto-format.

    1. Sum up on related options:
    "editor.tabSize":
    "editor.detectIndentation":
    "editor.formatOnSave":
    "prettier.tabWidth":
    "prettier.useEditorConfig":
    "prettier.useTabs":