Styjun

I'm running version 1.21 but I think this may apply to earlier versions as well.

Take a look at the bottom right-hand side of the screen. You should see something that says Spaces or Tab-Size.

Mine shows spaces, -->

1. Click on the Spaces (or Tab-Size)


2. Choose Indent Using Spaces or Indent using Tabs
   


3. Select the amount of spaces or tabs you like.

This only works per document, not project-wide. If you want to apply it project-wide, you need to also add "editor.detectIndentation": false to your user settings.

Well, the new version of Visual Studio Code allows you to specify differently file type for the tabSize. Here is the example of my settings.json with default 4 spaces and JavaScript/JSON 2 spaces:

 // I want my default to be 4, but JS/JSON to be 2
 "editor.tabSize": 4,
 "[javascript]": 
 "editor.tabSize": 2
 ,
 "[json]": 
 "editor.tabSize": 2
 

PS: Well, if you do not know how to open this file, you can: click left-bottom gear -> then settings

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.

 "editor.tabSize": 2,

 "editor.detectIndentation": false

We can control tab size by file type with EditorConfig and its Visual Studio Code extension. We then can make Alt + Shift + F specific to each file type.

Installation

ext install EditorConfig

Example Configuration

.editorconfig

[*]
indent_style = space

[*.cs,js]
indent_size = 4

[*.json]
indent_size = 2

settings.json

EditorConfig overrides whatever settings.json configures for the editor. There is no need to change editor.detectIndentation.

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.

That is lonefy.vscode-js-css-html-formatter to blame. Disable it, and install HookyQR.beautify.

Now on save your tabs wouldn't be converted.

In VSC version 1.31.1 or more (I think).
Like sed Alex Dima.
You can customize this easily via these settings for

• Windows in menu File → Preferences → User Settings or use short keys ctr + shift + p
  


• Mac in menu Code → Preferences → Settings or ⌘,

If you use the prettier extension in vscode, try adding this to the settings.json file:

"editor.insertSpaces": false,
"editor.tabSize": 4, 
"editor.detectIndentation": false,

"prettier.tabWidth": 4,
"prettier.useTabs": true // this made it finally work for me 

In your bottom-right corner, you have Spaces:
Spaces: 2

There you can change the indentation according to your needs:
Indentation Options

If the accepted answer on this post doesn't work, give this a try:

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.

Menu File → Preferences → Settings

Add to user settings:

"editor.tabSize": 2,
"editor.detectIndentation": false

then right click your document if you have one opened already and click Format Document to have your existing document follow these new settings.

When using TypeScript, the default tab width is always two regardless of what it says in the toolbar. You have to set "prettier.tabWidth" in your user settings to change it.

Ctrl + P, Type → user settings, add:

"prettier.tabWidth": 4

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.

If this is for Angular 2, and the CLI is generating files which you would like differently formatted, you can edit these files to change what is generated:

npm_modules/@angular/cli/blueprints/component/files/__path__/*

Not massively recommended as an npm update will delete your work, but it has saved me a lot of time.

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:

set indent_size = 4