How can I customize the tab-to-space conversion factor in VS Code?

Question

How do I customize the tab-to-space conversion factor when using Visual Studio Code?

For instance, right now in HTML it appears to produce two spaces per press of TAB, but in TypeScript it produces 4.

Answer 1

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 → Settings or Ctrl+, 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

• Alex Dima: Hey Guss, would you be willing to point me to a file where the guessing is wrong? Also please share how you've configured these two settings (tabSize & insertSpaces) and what you would expect to get. Thanks! :)
• Guss: 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
• Stijn de Witt: 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)...
• Jacob M. Barnard: Thanks ruffin. Is there a way to change tabSize per language? e.g. when editing multiple files with different languages in the same Workspace (e.g. Ruby, JavaScript, CSS, etc.) - Ruby would be 2 spaces, but CSS would be 4... usually.
• Lorraine Ram-El: If you have a .editorconfig file, it overrides all tab size. Make sure you have indent_size = 4 in that file

Answer 2

I'm running version 1.21, but I think this may apply to other 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, →

Enter image description here

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.

• Chris22: how is #3 done? After choosing #2, there doesn't appear to be a way to just "select the amount of spaces ... you like". Thanks.
• Heath Raftery: Wow. All this time I was tricked by that weird drop-down-list-as-context-menu UI element, when I only needed one more click to get to the number I can change. Thank you. After doing step #2, a new weird drop-down-list-as-context-menu UI element appears, letting me select a number from a list.
• Tricky: @Chris22 It should appear in an input bar at the top of the screen
• Chris22: @Tricky ah, yes, i see it. thanks. i'm not sure why i didn't see that before
• Lorraine Ram-El: If you have a .editorconfig file, it overrides all tab size. Make sure you have indent_size = 4 in that file

Answer 3

Note

If you are talking about prettier for tabSize, go to the Method 2 of this answer.

Method 1 (VS Code Way)

Well, if you like the developer way, Visual Studio Code allows you to specify the different file types for the tabSize. Here is the example of my settings.json with default four spaces and JavaScript/JSON two spaces:

PS: Well, if you do not know how to open this file (specially in a new version of Visual Studio Code), you can:

1. Left-bottom gear →
2. Settings → top right Open Settings

Enter image description here

{
 // I want my default to be 4, but JavaScript/JSON to be 2
 "editor.tabSize": 4,
 "[javascript]": {
 "editor.tabSize": 2
 },
 "[json]": {
 "editor.tabSize": 2
 },
 // This one forces the tab to be **space**
 "editor.insertSpaces": true
}

---

Method 2 (If using prettier)

If you are using prettier, things may be different again, prettier has 2 level of setting for this:

1. User level, which you can click the extension and click setting find the keyword tabWidth
2. Project level, which you can add/update from the root project level in file .prettierrc

• asd123ea: Doesn't work here... Can't get to know why...
• Xin: @bck are you using pretter? that case may be different, you might need to change extension setting or the project file .prettierrc.

Answer 4

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
}

• panzi: What if I want to make it all tabs? Because I need to edit a file format that requires tabs.

Answer 5

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

Installation

Open the VS Code command palette with CTRL + P and paste this:

ext install EditorConfig

Example Configuration

.editorconfig

[*]
indent_style = space
[*.{js,ts,json}]
indent_size = 2
[*.java]
indent_size = 4
[*.go]
indent_style = tab

settings.json

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

• Peter Mortensen: What is this ext you speak of (please respond by editing your answer, not here in comments (as appropriate))? Some Node.js thingy? What platform?
• Phani Rithvij: @PeterMortensen You can do a CTRL+P and paste the ext install EditorConfig it's a shortcut installation command specific to Vscode.

Answer 6

If you use the prettier extension in Visual Studio Code, 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

• NanoNova: why does prettier just use the editor.tabSize (

Answer 7

In Visual Studio Code version 1.31.1 or later (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 Ctrl + Shift + P
• Mac in menu Code → Preferences → Settings or ⌘,

Enter image description here

Enter image description here

Answer 8

There are already lots of good answers provided by our beloved community members. I actually wanted to add the C# code tabSize and found this thread. There are many solutions I found and official VS Code docs is awesome. I just want to share my C# setting:

"[csharp]": {
 "editor.insertSpaces": true,
 "editor.tabSize": 4
},

Just copy and paste above code to your settings.json file and save. thanks

• Abhishek Kasireddy: Yeah, this is the way to go if you want to set a different format for a specific language. I like using tabs with tabWidth=2, but autopep8 just hates that.

Answer 9

Since 2023 there is a new setting editor.indentSize to set the indentation size separately from tab stop size.

This is particularly useful for editing legacy code which relies on 8-space tabs but uses fewer spaces for indentation.

Here's an example configuration for a 4-space indentation, while aligning actual TABs on 8 spaces:

 "editor.insertSpaces": true,
 "editor.indentSize": 4,
 "editor.tabSize": 8,

tabStopWidth

Answer 10

1. CTRL + comma
2. Search for indent using tabs
3. Go and change Editor: Tab Size

enter image description here

That's aLL

• Heath Raftery: That's patently not all. Need to also consider auto-detect and the current file settings.

Answer 11

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

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

• PsychoData: many answers above you telling me how I can turn off the manual detection for all files - but yours was the first I spotted that actually told me how to change how many spaces it was detecting :) followed it up with "Format Document" - Shift-Alt-F to pretty print and adjust to the new Space-Tab-Indention depts

Answer 12

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.

Answer 13

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.

Answer 14

In Visual Studio Code version 1.14.1

• Select File > Preferences > Settings / press [Ctrl + ,]

Go to settings

• Select User > Commonly Used
• Set Tab Size to 4

Change tab size

Answer 15

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.

• Dave Nottage: Oh my god.. I just struggled for some time trying to work out why my tabs would go back to using 4 spaces instead of 2. Once EditorConfig was uninstalled, it worked. Thanks!

Answer 16

A much simpler approach is to use the in-built wildcard filter @lang: provided by Visual Studio Code.

Steps

1. Click the settings icon (bottom left)
2. Select Settings
3. In the Search Settings input box type in @lang:javascript tabsize

This will filter all the settings and leave you with the options for javascript's tabSize only. Enter the tab factor you want and it will be applied to that language.

Easy to follow steps

Please note

• To have these settings applied to your user profile make sure the User tab is selected. If the Workspace tab is selected, VSCode will create a .vscode folder in your project folder with a settings.json file; this means whatever changes you will do only apply to the current workspace (project folder)
• You can use this for any other language eg @lang:php tabsize

Answer 17

From the comments:

Is there a way to change tabSize per language? e.g. when editing multiple files with different languages in the same Workspace (e.g. Ruby, JavaScript, CSS, etc.) - Ruby would be 2 spaces, but CSS would be 4... usually

That is why, with VSCode 1.63 (Nov. 2021), you have:

Multiple language specific editor settings

You can now configure language specific editor settings for multiple languages at once.
Following example shows how you can customise settings for javascript and typescript languages together:

"[javascript][typescript]": {
 "editor.maxTokenizationLineLength": 2500
}

In your case:

"[ruby][html]": {
 "editor.insertSpaces": true,
 "editor.tabSize": 2
},
"[csharp][typescript]": {
 "editor.insertSpaces": true,
 "editor.tabSize": 4
},

---

You can also change the tab size in terminals, with VSCode 1.75 (Jan. 2023).

Answer 18

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.

Answer 19

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

Answer 20

@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.

Answer 21

I had to do a lot of settings edits like the previous answers, so I don't know which made it work after a lot of modifications.

Nothing worked until I closed and openen my IDE, but the last three things I did was disable the lonefy.vscode-js-css-html-formatter, "html.format.enable": true, and restart Visual Studio.

{
 "editor.suggestSelection": "first",
 "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
 "workbench.colorTheme": "Default Light+",
 "[html]": {
 "editor.defaultFormatter": "vscode.html-language-features",
 "editor.tabSize": 2,
 "editor.detectIndentation": false,
 "editor.insertSpaces": true
 },
 "typescript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
 "editor.tabSize": 2,
 "typescript.format.insertSpaceAfterConstructor": true,
 "files.autoSave": "afterDelay",
 "html.format.indentHandlebars": true,
 "html.format.indentInnerHtml": true,
 "html.format.enable": true,
 "editor.detectIndentation": false,
 "editor.insertSpaces": true,
}

Answer 22

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

Answer 23

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.

Answer 24

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.