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

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, →

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.

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

Note

if you are talking about prettier for tabSize, go to the section 2 of this answer

Section 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:

{
  // 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
}

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

---

Section 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