17 Answers
17

By default, Visual Studio Code will try to guess your indentation options depending on the file you open.

You can turn off indentation guessing via "editor.detectIndentation": false.

You can customize this easily via these three settings for Windows in menu File → Preferences → User Settings and for Mac in menu Code → Preferences → Settings or ⌘,:

// The number of spaces a tab is equal to. This setting is overridden
// based on the file contents when `editor.detectIndentation` is true.
"editor.tabSize": 4,
// Insert spaces when pressing Tab. This setting is overriden
// based on the file contents when `editor.detectIndentation` is true.
"editor.insertSpaces": true,
// When opening a file, `editor.tabSize` and `editor.insertSpaces`
// will be detected based on the file contents. Set to false to keep
// the values you've explicitly set, above.
"editor.detectIndentation": false

I have configured both settings to "auto", and the behavior is not as I expect (though I wouldn't go as far as to call it "wrong"). I don't know what file should be changed to support my convention, but I opened a uservoice ticket for that, as suggested in the answer to question #30057721
– GussMay 7 '15 at 9:49

3

Is there also an option to set the default for new, blank files? There's not much to guess in that scenario and I think VSCode will default to using spaces (which I don't prefer)...
– Stijn de WittOct 7 '16 at 12:43

3

This did not work when i tried it with a .json file.
– arcseldonOct 12 '16 at 12:32

nice. just need to right click on the file then choose format code to do the conversion.
– Meirion HughesAug 18 '16 at 11:09

9

Much clearer solution than the accepted answer. I could not even edit the file in the accepted answer. This actually worked.
– DarthOptoNov 8 '16 at 16:41

I'm using VS Code on Windows. Using the tab indicator on the status bar method to change tab settings works for most files but is not working in .cshtml files? Can anyone confirm?
– Darren EvansApr 12 '17 at 12:40

1

VSCode warns now if editor.detectIndentation is set to true and you change the editor.tabSize. However, since the GUI for settings.json or user-settings.json it's easier to change this now.
– chriszo111Nov 15 '18 at 14:13

Beautiful. It works! Some quick addition to that, the thing between the brackets, if you look at the lower right corner of visual studio, you can spot the name to use! Check it out: tinypic.com/m/jr9nw1/3
– Jose AOct 6 '17 at 13:17

By default, Visual Studio Code auto-detects the indentation of the current open file. If you want to switch this feature off and make all indentation, for example, two spaces, you'd do the following in your User Settings or Workspace settings.

And if you want to leave "editor.detectIdentation": true, but still change the identation from spaces to tabs, you need to remove all identation in your file, save and close it, then reopen and do Format document.
– LoBoMay 26 '17 at 14:48

...why would you do that? Can't you just use the convert indentation command?
– celticminstrelAug 6 '18 at 16:04

You want to make sure your editorconfig is not conflicting with your user or workspace settings configuration, as I just had a bit of annoyance thinking the settings files settings were not being applied when it was my editor configuration undoing those changes.

I had EditorConfig for Visual Studio Code installed in my editor, and it kept overriding my user settings which were set to indent files using spaces. Every time I switched between editor tabs, my file would automatically get indented with tabs even if I had converted indentation to spaces!!!

Right after I uninstalled this extension, indentation no longer changes between switching editor tabs, and I can work more comfortably rather than having to manually convert tabs to spaces every time I switch files - that is painful.

@alex-dima's solution from 2015 will change tab sizes and spaces for all files and @Tricky's solution from 2016 appears to only change the settings for the current file.

As of 2017, I found another solution that works on a per-language basis. Visual Studio Code was not using the proper tab sizes or space settings for Elixir, so I found that I could change the settings for all Elixir files.

I clicked on the language in the status bar ("Elixir" in my case), chose "Configure 'Elixir' language based settings...", and edited the Elixir-specific language settings. I just copied the "editor.tabSize" and "editor.insertSpaces" settings from the default settings on the left (I'm so glad those are shown) and then modified them on the right.

It worked great, and now all Elixir language files use the proper tab size and space settings.

User3550138 is correct. lonefy.vscode-js-css-html-formatter overrides all the settings mentioned in other answers. However, you don't have to disable or uninstall it as it can be configured.

Full instructions can be found by opening the extensions sidebar and clicking on this extension and it will display configuration instructions in the editor workspace. At least it does for me in Visual Studio Code version 1.14.1.

I tried to change editor.tabSize to 4, but .editorConfig overrides whatever settings I had specified, so there is no need to change any configuration in user settings. You just need to edit .editorConfig file: