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

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?

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

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.

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.

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.