Visual Studio Code - Convert spaces to tabs

Visual Studio-CodeTabsSpaces

Visual Studio-Code Problem Overview


I have both TypeScript and HTML files in my project, in both files tabs are converted to spaces.

I want to turn the auto-conversion off and make sure that my project has only tabs.

Edit:

With this setting it seems to work in HTML files but not in TypeScript files.

{
  "editor.insertSpaces": false
}

Visual Studio-Code Solutions


Solution 1 - Visual Studio-Code

There are 3 options in .vscode/settings.json:

// The number of spaces a tab is equal to.
"editor.tabSize": 4,

// Insert spaces when pressing Tab.
"editor.insertSpaces": true,

// When opening a file, `editor.tabSize` and `editor.insertSpaces` will be detected based on the file contents.
"editor.detectIndentation": true

editor.detectIndentation detects it from your file, you have to disable it. If it didn't help, check that you have no settings with higher priority. For example when you save it to User settings it could be overwritten by Workspace settings which are in your project folder.

> Update:

You may just open File » Preferences » Settings or use shortcut:

CTRL+, (Windows, Linux)

+, (Mac)

>Update:

Now you have alternative to editing those options manually.
Click on selector Spaces:4 at the bottom-right of the editor:
 Ln44, Col .  [Spaces:4] . UTF-8 with BOM . CTRLF . HTML . :)

When you want to convert existing ws to tab, install extension from Marketplace
EDIT:
To convert existing indentation from spaces to tabs hit Ctrl+Shift+P and type:

>Convert indentation to Tabs

This will change the indentation for your document based on the defined settings to Tabs.

Solution 2 - Visual Studio-Code

To change tab settings, click the text area right to the Ln/Col text in the status bar on the bottom right of vscode window.

The name can be Tab Size or Spaces.

A menu will pop up with all available actions and settings.

enter image description here

Solution 3 - Visual Studio-Code

Ctrl+Shift+P, then "Convert Indentation to Tabs"

Solution 4 - Visual Studio-Code

If you want to use tabs instead of spaces

Try this:

  1. Go to FilePreferencesSettings or just press Ctrl + ,
  2. In the Search settings bar on top insert editor.insertSpaces
  3. You will see something like this: Editor: Insert Spaces and it will be probably checked. Just uncheck it as show in image below

Editor: Insert Spaces

  1. Reload Visual Studio Code (Press F1 ➤ type reload window ➤ press Enter)

If it doesn't worked try this:

It's probably because of installed plugin JS-CSS-HTML Formatter

(You can check it by going to FilePreferencesExtensions or just pressing Ctrl + Shift + X, in the Enabled list you will find JS-CSS-HTML Formatter)

If so you can modify this plugin:

  1. Press F1 ➤ type Formatter config ➤ press Enter (it will open the file formatter.json)
  2. Modify the file like this:
 4|    "indent_size": 1,
 5|    "indent_char": "\t"
——|
24|    "indent_size": 1,
25|    "indentCharacter": "\t",
26|    "indent_char": "\t",
——|
34|    "indent_size": 1,
35|    "indent_char": "\t",
36|    "indent_character": "\t"
  1. Save it (Go to FileSave or just press Ctrl + S)
  2. Reload Visual Studio Code (Press F1 ➤ type reload window ➤ press Enter)

Solution 5 - Visual Studio-Code

Check this from official vscode setting:

// Controls whether `editor.tabSize#` and `#editor.insertSpaces` will be automatically detected when a file is opened based on the file contents.
"editor.detectIndentation": true,

// The number of spaces a tab is equal to. This setting is overridden based on the file contents when `editor.detectIndentation` is on.
"editor.tabSize": 4,

// Config the editor that making the "space" instead of "tab"
"editor.insertSpaces": true,

// Configure editor settings to be overridden for [html] language.
"[html]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "editor.autoIndent": false
}

Solution 6 - Visual Studio-Code

In my case, the problem was JS-CSS-HTML Formatter extension installed after january update. The default indent_char property is space. I uninstalled it and the weird behavior stops.

Solution 7 - Visual Studio-Code

Below settings are worked well for me,

"editor.insertSpaces": false,
"editor.formatOnSave": true, // only if you want auto fomattting on saving the file
"editor.detectIndentation": false

Above settings will reflect and applied to every files. You don't need to indent/format every file manually.

Solution 8 - Visual Studio-Code

File -> Preferences -> Settings or just press Ctrl + , and search for spaces, then just deactivate this option:

enter image description here

I had to reopen the file so the changes would take effect.

Solution 9 - Visual Studio-Code

  1. Highlight your Code (in file)
  2. Click Tab Size in bottom righthand corner of application window Tab Size in bottom righthand corner of application window image
  3. Select the appropriate Convert Indentation to Tabs Select the appropriate Convert Indentation to Tabs image

Solution 10 - Visual Studio-Code

If you want to change tabs to spaces in a lot of files, but don't want to open them individually, I have found that it works equally as well to just use the Find and Replace option from the left-most tools bar.

In the first box (Find), copy and paste a tab from the source code.

In the second box (Replace), enter the number of spaces that you wish to use (i.e. 2 or 4).

If you press the ... button, you can specify directories to include or ignore (i.e. src/Data/Json).

Finally, inspect the result preview and press Replace All. All files in the workspace may be affected.

Solution 11 - Visual Studio-Code

Set this to false if you are using .sass files and it's giving you the Expected tabs, was spaces error:

"editor.detectIndentation": false

... then select your block of code and indent it by pressing the tab key and indent it back by pressing the shift + tab key.

Solution 12 - Visual Studio-Code

{
  "editor.insertSpaces": true
}

True works for me.

Solution 13 - Visual Studio-Code

In my case it was about unchecking

Prettier: Use Tabs

on VSCode settings

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMatan YadaevView Question on Stackoverflow
Solution 1 - Visual Studio-Codev-andrewView Answer on Stackoverflow
Solution 2 - Visual Studio-CodeEric Bole-FeysotView Answer on Stackoverflow
Solution 3 - Visual Studio-CodecarlsborgView Answer on Stackoverflow
Solution 4 - Visual Studio-CodeAlex LogvinView Answer on Stackoverflow
Solution 5 - Visual Studio-CodeXinView Answer on Stackoverflow
Solution 6 - Visual Studio-CodeVinicios TorresView Answer on Stackoverflow
Solution 7 - Visual Studio-CodeRohan KumarView Answer on Stackoverflow
Solution 8 - Visual Studio-CodekungfoomanView Answer on Stackoverflow
Solution 9 - Visual Studio-CodeRealScatmanView Answer on Stackoverflow
Solution 10 - Visual Studio-CodekvanbereView Answer on Stackoverflow
Solution 11 - Visual Studio-CodebabakfpView Answer on Stackoverflow
Solution 12 - Visual Studio-CodeilovethedramaView Answer on Stackoverflow
Solution 13 - Visual Studio-CodepatrinouaView Answer on Stackoverflow