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

The best answers to the question “How can I customize the tab-to-space conversion factor?” in the category Dev.

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:

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

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.

ANSWER:

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 FilePreferencesUser Settings and for Mac in menu CodePreferencesSettings 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

ANSWER:

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
}

ANSWER:

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

 

Enter image description here