24

Whenever I let vscode autoformat my code, it formats to 2 spaces instead of 4, even though apparently the default is 4 spaces, and I have not touched the settings.json

Editor.tabsize also shows 4.

In the bottom right hand corner, its shows spaces: 4, but after autoformatting, it shows spaces: 2, and will revert itself back to 2 no matter how many times I change it to 4.

Anyone know what's going on. This is happening with Ruby, if that matters.

Also, does anyone know of an alternate indenter/autoformatter for VScode?

Chris
  • 1,101
  • 2
  • 9
  • 14

3 Answers3

35

I think that you might have a problem with "Auto Detect Indentation". You should try to turn it off and see if that helps.

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

// When opening a file, `editor.tabSize` and `editor.insertSpaces` will be detected based on the file contents.
"editor.detectIndentation": false
Hywel Rees
  • 884
  • 1
  • 15
  • 22
juandaco
  • 964
  • 9
  • 6
  • 1
    `how to do it?` Answer is excellent, please bother to add some guide it is telling perfectly `what to do`, but everybody would not get `how to do it` – Sami Feb 03 '21 at 11:17
  • `Ctrl` + `,` (comma) opens the settings tab. Use the search bar there. – nomad Apr 21 '21 at 12:01
  • 1
    I did that - still not working. Any ideas? – Lachezar Raychev Apr 25 '21 at 05:34
  • 5
    I just HATE this IDE from all of my heart. Two hours now I can't fix this... I indent the file with 4 spaces and when I hit autoformatting shortcut it is back to 2.... i have no Idea what the hell is going on.. – Lachezar Raychev Apr 25 '21 at 06:02
  • 1
    I think this is a bug from vs code – stackoverflow Sep 23 '21 at 18:00
  • 3
    @LachezarRaychev - it's likely you have an extension, such as Prettier, installed that is overriding VSCode's built-in settings. Find the configuration for that extension and configure your indentation settings there. – Sean Murphy Oct 14 '21 at 14:48
  • 1
    Thanks @LachezarRaychev, Prettier was the root cause, and changing "prettier.tabWidth": 4 has done the trick. – Brian Oct 14 '22 at 04:54
17

For those who could not use above like me, Here is somewhat GUI guide.

Go to setting by pressing = > CTRL + , (suggested by comment) to open settings or via menue

File->Preferences->Settings

There you can find both (find tab size and detect indentation) in search box, like I have shown in following image (see the text 'lets play')

detect indentation => uncheck it (turn off)

tab size => Set it to 4

How to ? need to visualize? here it is,

Right click following image and open in new tab see it clearly

enter image description here

Sami
  • 8,168
  • 9
  • 66
  • 99
1

I solved this problem using https://editorconfig.org/

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
indent_style = tab
indent_size = 4
end_of_line = crlf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

Make sure to also install the vs code extension!

stackoverflow
  • 1,303
  • 2
  • 21
  • 36