How do I Change VSCode To Indent 4 Spaces Instead Of Default 2?

Question

I have applied the below settings in VS Code to get 4 spaces indentation.
But always when I open a new file, it switches back to 2 in the right-bottom corner.

If I click in the right-bottom corner and change the setting back to 4,
VSCode will still change back to 2 and still apply it with the 2-space auto-indent.
Alt+Shift+F

What am I missing?

In Settings->Workspace->Extensions->Vetur: TabSize = 4 and Use Tabs = true. See this answer to this post: https://stackoverflow.com/a/54340064/6393500 — rjgodoy, May 03 '20 at 07:09

score 141 · Answer 1 · answered Jul 18 '18 at 09:24

Bit of an late answer. But just got the same issue solved...

Multiple things are able to control this. It also has taken me quite a bit of experimentation to get it corrected. For me point 3 below was the final trick to make it work. Before that, I noticed the editor loading with 4, but jumping back to 2 spaces. Now it stays at 4.

Some things to check:

1: VS Code configuration (Settings & Workspace, you can set these for system wide configuration or just for the current Workspace): Check whether you have set:

"editor.tabSize": 4,
"editor.insertSpaces": true,
"editor.detectIndentation": false

And language specific settings (optional):

"[javascript]": {
    "editor.tabSize": 4
},
"[typescript]": {
    "editor.tabSize": 4
}

2: Are there any Extensions that could influence the indentation -> people have reported JS-CSS-HTML to also configure the setting.

3: Is there a .editorconfig file in your workspace? If so, check the settings over there. Angular creates one for example and configures the indent_size:

# Editor configuration, see http://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false

Most answers focussed point 1 which, but for me the last step was important to make VS Code work properly.

This Stack Overflow handles all of the above in different answers: Visual Studio Code: format is not using indent settings

Thanks for the update. My problem was rather with all the Angular plugins installed that over-rode the config. I close this issue now. — alebo611, Jul 19 '18 at 13:40
I got hit with the `.editorconfig`, thanks for ending my wild goose chase — Dagrooms, Mar 07 '19 at 00:18
`.editorconfig` was the problem for me, specifically a global `~/.editorconfig` file that was being used in place of an absent on in a project. — carmat, Oct 15 '19 at 08:13
Adding another extension [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) that override tab indentation for markdown files. You'll need to configure the extension. — Paul, Jan 16 '20 at 04:49

score 53 · Answer 2 · answered Feb 28 '19 at 10:51

53

I fixed it in the VisualStudio settings (1.31)

Go to: settings > workspace settings > Text editor

uncheck 'Detect Indentation' to stick to your default setting.

answered Feb 28 '19 at 10:51

Thomas

648
5
9

score 9 · Answer 3 · answered Aug 09 '21 at 19:17

In many cases, it is Prettier that causes this. In fact, it just ignores all settings listed in @Oskar's answer.

So it needs to be overridden explicitly:

"prettier.tabWidth": 4,
"prettier.useTabs": true

And then just go to your file and hit Ctrlk,Ctrld, and the correct indentation should be applied.

See also Prettier is not indenting as specified.

JL Peyret · Answer 4 · 2021-07-19T17:57:44.333

Slightly different from previous answers. I had one file with the wrong indentation for its type and I wanted to correct only that file.

(If you must know: this Python script started out as text file with some queries in it. I got it from psql's -E \d echo look at the postgres schemas).

Anyway, this file was now a Python .py file, with a 2 spaces indentation. Not something that should be fixed by modifying general vscode settings.

What I did:

click on the bottom status bar spot that says 2 Spaces
choose Convert Indentation to Tabs on the dialog popup. Now it says Tab size 2
click on the status bar again where it says Tab size 2
choose Convert Indentation to Spaces. Now the dialog changes to propose indent size: 2 is selected. Pick 4 instead or any size you want.
Done

Basically there are different ways through this dialog, but if you get into tab mode and then switch back to space-based indentation, it will allow you to pick the number of spaces you want to use.

score 3 · Answer 5 · edited Apr 25 '21 at 08:58

3

Be careful; this extension EditorConfig for VS Code interferes with vscode tab and indentation settings. Its installed by default but it is a nightmare. Disable it will solve all your problems.

edited Apr 25 '21 at 08:58

Brian Tompsett - 汤莱恩

5,753
72
57
129

answered Apr 25 '21 at 07:59

Sami M

39
1

No, it's not installed by default in VS Code. You have to install it manually. No extension needed to parse .editorConfig with Visual Studio by the way. – Jim Raynor Oct 05 '21 at 20:07
1

For me the actual tabsize keeps resetting itself to 4 when editor gets a focus. Disabling this extension actually helps. :) Thanks! – Сергей Червонос Oct 16 '21 at 10:32

score 0 · Answer 6 · answered Apr 29 '22 at 01:58

Another problem I discovered with Python is that VS Code uses autopep8. No matter which setting I tweaked, VS Code seemed to ignore the 2 spaces setting. If you want 2 spaces instead of 4 - the fix is to add this to your settings.json.

    "python.formatting.autopep8Args": [
        "--indent-size=2",
        "--ignore E121"
    ]

Btw you can see your autopep8 arguments by opening the command palette (⌘-shift-p on mac) and entering >Python: Show Language Server Output then switching to view the "Python" log.

This seems to be a common issue. See: VS Code Python autopep8 does not honor 2 spaces hanging indentation

How do I Change VSCode To Indent 4 Spaces Instead Of Default 2?

6 Answers6

Linked

Related