Visual Studio Code - Convert spaces to tabs

Question

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
}

It's beyond me why IDE's default to converting tabs to spaces. If I wanted spaces, I'd tap the space bar 4 times for every indent.... like a savage. — Joshua Schlichting, Sep 08 '20 at 20:00

score 430 · Accepted Answer · edited May 31 '22 at 11:20

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:

To access these settings, you can open File » Preferences » Settings, click the Manage cog icon at the bottom left, or use the keyboard shortcut:

CTRL+, (Windows, Linux)

⌘+, (Mac)

Update:

Now you have an alternative to editing those options manually.
Click on selector Spaces:4 at the bottom-right of the editor:

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.

how do I do `>Convert indentation to Tabs` permanently for all my files and projects in VSCode? — Farid Alijani, Dec 25 '20 at 12:27
@FäridAlijani, @ VijenderKumar I don't think it is possible using VS Code — v-andrew, Dec 28 '20 at 16:13

Eric Bole-Feysot · Answer 2 · 2017-03-28T08:21:27.723

179

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.

edited Mar 28 '17 at 08:21

answered Apr 27 '16 at 08:30

Eric Bole-Feysot

13,949
7
47
53

5

For me, this only changes these settings for the particular file I'm currently viewing. The other files in the project keep their old settings. How would you set it universally? – Kyle Vassella Aug 24 '18 at 15:49
I usually replace all my files at once, if I need to, by doing a project search for the simple regex ` {4}` and replace with \t (for tabs). Usually also glance over the matches to make sure nothing will break like multi-line string literals, etc. Obviously apply these settings so that your new indentations are the desired characters, too! – cossacksman Nov 19 '19 at 15:28

score 58 · Answer 3 · edited Sep 04 '19 at 08:42

58

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

edited Sep 04 '19 at 08:42

ford04

66,267
20
199
171

answered Jul 31 '18 at 12:56

carlsborg

2,628
19
21

1

Is it possible to do this for a selection and not the whole file? – dbrane Apr 08 '21 at 19:11
1

is it possible to do this for a whole repo and not just one file? – Matt Wyndham May 13 '21 at 17:13
@dbrane Yes. If you highlight a block of code in a file, the conversion applies just within the selection. Btw, on Mac the key combo is ⌥ + P (alt/option + P). – Trutane Oct 06 '21 at 01:09

Alex Logvin · Answer 4 · 2019-09-05T06:43:30.333

34

If you want to use tabs instead of spaces

Try this:

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

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 File ➤ Preferences ➤ Extensions or just pressing Ctrl + Shift + X, in the Enabled list you will find JS-CSS-HTML Formatter)

If so you can modify this plugin:

Press F1 ➤ type Formatter config ➤ press Enter (it will open the file formatter.json)
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"

Save it (Go to File ➤ Save or just press Ctrl + S)
Reload Visual Studio Code (Press F1 ➤ type reload window ➤ press Enter)

edited Sep 05 '19 at 06:43

answered Sep 13 '18 at 10:04

Alex Logvin

766
10
12

If you want spaces instead of tabs, modify `formatter.json` file: put one _space_ in any quotation mark instead of `\t` (So `"\t"` became `" "`), and put *4* where you see *1*. So you come might be like this `"indent_size": 4, "indent_char": " " "indent_size": 4, "indentCharacter": " ", "indent_char": " ", "indent_size": 4, "indent_char": " ", "indent_character": " "` – Alex Logvin Apr 09 '19 at 16:55
2

The RELOAD WINDOW step was what I was missing. Frustrating to have gone the process of checking boxes and fiddling with settings 3 times for no changes to take, when all I had to do was reload window. Thanks for the tip! – Rin and Len Dec 18 '19 at 08:50
1

Reloading VS Code did the trick – DemiA Oct 21 '22 at 15:22
1

thank you. The only answer, describing how to do it. – Alex Sham Mar 10 '23 at 18:16

Xin · Answer 5 · 2019-12-16T22:55:47.577

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
}

score 9 · Answer 6 · edited Sep 05 '19 at 07:50

9

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.

edited Sep 05 '19 at 07:50

Alex Logvin

766
10
12

answered Feb 13 '17 at 17:08

Vinicios Torres

91
1
4

Oh yes, this is was the actual issue for me. spend a lot of time tinkering around setting in VS code. finally disabling this extension solved the problem. – Avijeet May 13 '17 at 13:43

score 9 · Answer 7 · answered Dec 01 '17 at 04:49

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.

score 8 · Answer 8 · edited Feb 15 '20 at 14:58

8

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

edited Feb 15 '20 at 14:58

Dharman

30,962
25
85
135

answered Feb 15 '20 at 14:52

RealScatman

358
3
5

score 6 · Answer 9 · edited Sep 05 '19 at 08:39

6

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

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

edited Sep 05 '19 at 08:39

karel

5,489
46
45
50

answered Nov 22 '18 at 05:08

kungfooman

4,473
1
44
33

score 2 · Answer 10 · answered Apr 29 '20 at 05:07

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.

score 2 · Answer 11 · answered Sep 23 '21 at 11:55

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.

score 0 · Answer 12 · answered Feb 15 '22 at 22:30

0

In my case it was about unchecking

Prettier: Use Tabs

on VSCode settings

answered Feb 15 '22 at 22:30

patrinoua

21
1
5

score -1 · Answer 13 · edited Mar 20 '20 at 22:19

-1

{
  "editor.insertSpaces": true
}

True works for me.

edited Mar 20 '20 at 22:19

Nisarg

1,631
6
19
31

answered Mar 20 '20 at 16:54

ilovethedrama

43
8

Visual Studio Code - Convert spaces to tabs

13 Answers13

If you want to use tabs instead of spaces

Try this:

If it doesn't worked try this:

Linked