Visual Studio Code: format is not using indent settings

Question

When using the Format Code command in Visual Studio Code, it is not honoring my indent settings ("editor.tabSize": 2). It is using a tab size of 4 instead. Any ideas why this is happening?

Thanks!

Which Language? Visual Studio Code delegate formatting to Language formatter. Some formatter does observe the indent setting. For example, C#, which is handled by OmniSharp, and should be configured using omnisharp.json — Ian Yang, Apr 03 '17 at 13:24
This took me a long time to figure out: I had a .cs file with mixed tabs and space-indents and wanted to format it with all tabs (b/c the majority of lines had tabs). I tried various settings values with "Format document" and "Format selection" but had no luck. Finally I found the "Convert Indentation to Tabs" action (see the image in @Maleki's answer) and that did what I wanted to do. (I also recently discovered ctrl-shift-p ! ...yes, I'm new to VS Code) — KevinVictor, May 13 '20 at 15:53
I want 4 instead of 2 :) Even after reopening file it is fixed to 2 in my VSC — A.W., Aug 01 '21 at 09:59

score 374 · Answer 1 · answered May 06 '16 at 16:22

374

The number of spaces to use for formatting is taken from a different location. I'm using version 1.0 and this is what I've done to fix it (I'm assuming your using spaces instead of tabs):

At the bottom of the editor on the right hand click "Spaces: #":

Then a menu will appear up top. Select "Indent Using Spaces":

Finally you can select by how many spaces you want your files to be indented.

The next time you format a file you should be able to get the spacing you configured.

answered May 06 '16 at 16:22

Maleki

4,038
1
15
17

60

This setting isn't used when applying the auto format (right-click -> Format Code). It always uses 4 spaces. – kiml42 Aug 08 '16 at 12:00
You need to both - configure your personal settings for either workspace or editor (or both). New files will pickup that setting and show '2' for example, in the status bar as per these screenshots. Then you can autoformat. For existing files, first set your workspace/editor settings to 'use tabs' or 'use spaces' and set the number of spaces, then you can do the above method to autoformat existing files. – rmcsharry Sep 08 '16 at 14:39
17

Set both user and workspace settings, set it in the bottom bar, reopened file - still autoformat is using 4 spaces... – Jared Nov 09 '16 at 18:17
6

Had to exit and restart vscode after setting both user and workspace defaults for the settings to take. Only then did it stop trying to use 4 spaces on my JS files. – John Pettitt Nov 25 '16 at 21:38
12

@Jared I think you are using the `JS-CSS-HTML` plugin. In that case Press `F1` and choose formatter and set your indentation there. It seems to override all the options discussed above. – Atif Nov 27 '16 at 20:37
@Jared : Glad it worked. I still have one problem with it. It seems to prettify my CSS code even if I keep it between `beautify:preserve` or `beautify:ignore`. In case if you find a workaround for this, do share with me too. – Atif Dec 01 '16 at 13:52
My team decided to use 3 spaces instead of a tab. I tried several plugins and none of them works perfectly (in fact all of them behave same to me). It fails to format some of HTML file and some of the js files. For HTML files, it seems to mess up if I have nested span tags. I couldn't figure out why it misses some of JS files (nothing special to me). Also, the "Spaces #" doesn't work for some of the files - I adjusted to 3, but it keeps coming back as 6. – newman Feb 09 '17 at 16:39
I have tab size 2 and spaces set in User and Workspace. If I open a file I did not create (project generator created files for example), it shows indentation as 4 in VS Code and if I hit SHIFT-ALT F, nothing happens. I have to click on the tab indicator in the status bar and change it that way. Strangely, this does not work in .cshtml files. They retain their tab settings regardless. Why are the settings in User and Workspace not automatically overriding whatever a file happens to be saved as? – Darren Evans Apr 12 '17 at 12:22
I had 4 spaces set in user and workspace settings. But for one particular file, for some reason, it was stuck at 2 spaces and it was driving me crazy. Now its resolved. Thanks a lot. This is exactly what I was looking for. – lifetimeLearner007 Oct 01 '20 at 10:59
Beware extension like JS-CSS-HTML Formatter, HTML (C#). Disable all of those before you experiment. – AUSTX_RJL Apr 30 '21 at 16:52
This is very helpful and works well for me. – Arefe Sep 25 '21 at 10:55

score 160 · Answer 2 · edited May 30 '19 at 07:42

160

Visual Studio Code detects the current indentation per default and uses this - ignoring the .editorconfig

Set also "editor.detectIndentation" to false

(Files -> Preferences -> Settings)

edited May 30 '19 at 07:42

Pablo Bianchi

1,824
1
26
30

answered May 05 '17 at 15:47

jnkb

1,885
1
12
8

2

If this happens, you probably have inconsistent indentation within the file. I had a file with tabs everywhere except for a few lines with two spaces (who knows why), which ended up being detected as using tabs but with a tab size of 2. – isanae Sep 22 '17 at 15:39
@isanae I have `docker-compose.yaml` with all lines properly indented with 2 spaces, but VSCode always defaults to 4 spaces for some reason (`yaml` files specified to have `"editor.tabSize":2` in `~/.config/Code/User/settings.json`). – Slaus Apr 17 '21 at 03:33

score 78 · Answer 3 · answered Mar 31 '17 at 02:51

78

If @Maleki's answer isn't working for you, check and see if you have an .editorconfig file in your project folder.

For example the Angular CLI generates one with a new project that looks like this

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

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

[*.md]
max_line_length = off
trim_trailing_whitespace = false

Changing the indent_size here is required as it seems it will override anything in your .vscode workspace or user settings.

answered Mar 31 '17 at 02:51

seangwright

17,245
6
42
54

6

I had to restart VSCode in order for the change to take effect in the IDE. – JOpuckman Jan 02 '18 at 21:33
5

In my case it was actually caused by the `.editorconfig` file in my home folder. Somehow it makes VSCode ignore any Workspace-specific settings. Very annoying. – xji Sep 21 '18 at 10:01

score 36 · Answer 4 · answered Jan 24 '19 at 05:44

36

If you're using a plugin (in my case Vetur, for vue.js), these may set their own tab formatting settings.

Open your settings, search for "format" and look through relevant plugin settings that may be overwriting the global tab format. This worked for me; once I updated Vetur tab settings to match my preference (4-size tabs in my case), formatting .vue documents started to work properly:

answered Jan 24 '19 at 05:44

Ciabaros

1,984
13
15

That's true, in my case I needed to set the tab size in the settings of the Prettier extension as well. – tonix Oct 01 '19 at 22:44
Worth noting that the `SCSS Formatter` plugin uses its own settings for example, so you must go to `Settings > Extensions > SCSS Formatter > Use Tabs` to force it to use tabs for example. – SmartyP Feb 03 '20 at 15:25
My formatter was "prettier" and I couldn't fix this until I drilled into Prettier's settings. Prettier's settings will not appear in search for 'tab' or 'tab size', unfortunately. – Robin Nelson Jun 22 '21 at 22:12

score 23 · Answer 5 · answered Jul 30 '18 at 18:52

23

For myself, this problem was caused by using the prettier VSCode plugin without having a prettier config file in the workspace.

Disabling the plugin fixed the problem. It could have also probably been fixed by relying on the prettier config.

answered Jul 30 '18 at 18:52

tailattention

410
3
8

2

For me it was the "Beautify" plugin. – Matthew Smith Mar 21 '19 at 15:46
I had the same problem with "Clang-Format" and the ".clang-format" config file. – repkap11 May 21 '19 at 04:12
Thank you. This is what was happening to me. Adding an `.editorconfig` file to the root of my project caused prettier to behave as expected – claudekennilol May 17 '22 at 20:45

score 15 · Answer 6 · answered Mar 22 '19 at 05:18

15

the settings below solved my issue

  "editor.detectIndentation": false,
  "editor.insertSpaces": false,
  "editor.tabSize": 2,

answered Mar 22 '19 at 05:18

rashidnk

4,096
2
22
32

it works if u work with files with 2 spaces tabs only! – Dominux Mar 06 '20 at 19:17

score 7 · Answer 7 · answered Apr 09 '17 at 12:26

Most likely you have some formatting extension installed, e.g. JS-CSS-HTML Formatter.

If it is the case, then just open Command Palette, type "Formatter" and select Formatter Config. Then edit the value of "indent_size" as you like.

P.S. Don't forget to restart Visual Studio Code after editing :)

score 5 · Answer 8 · answered Jun 13 '18 at 22:54

I had a similar problem -- no matter what I did I couldn't get the tabsize to stick at 2, even though it is in my user settings -- that ended up being due to the EditorConfig extension. It looks for a .editorconfig file in your current working directory and, if it doesn't find one (or the one it finds doesn't specify root=true), it will continue looking at parent directories until it finds one.

Turns out I had a .editorconfig in a parent directory of the dir I put all my new code projects in, and it specified a tabSize of 4. Deleting that file fixed my issue.

Yes, was my .editor-config too which was added auto-magically by nrwl. I had set everything else to 4 and couldn't figure it out. Cheers!! — crowmagnumb, Oct 07 '20 at 00:40

score 5 · Answer 9 · answered Sep 07 '20 at 16:08

5

Also make sure your Workspace Settings aren't overriding your User Settings. The UI doesn't make it very obvious which settings you're editing and "File > Preferences > Settings" defaults to User Settings even though Workspace Settings trump User Settings.

You can also edit Workspace settings directly: /.vscode/settings.json

answered Sep 07 '20 at 16:08

DoomGoober

1,533
14
20

1

workspace settings solved my issue, thanks – T.J. May 25 '22 at 21:40

score 4 · Answer 10 · answered Sep 15 '17 at 00:44

If you came here from google because tab isnt indenting, this can also be because "Tab Moves Focus" is on. It is at the bottom right, and if you have a large enough monitor you may miss it despite it being highlighted.

Click the Green area or Ctrl + M to make it stop. I'm not sure it can be disabled entirely, then again I dont know why a code editor would want to mess with something like indenting.

score 3 · Answer 11 · answered Aug 09 '17 at 18:30

I sometimes have this same problem. VSCode will just suddenly lose it's mind and completely ignore any indentation setting I tell it, even though it's been indenting the same file just fine all day.

I have editor.tabSize set to 2 (as well as editor.formatOnSave set to true). When VSCode messes up a file, I use the options at the bottom of the editor to change indentation type and size, hoping something will work, but VSCode insists on actually using an indent size of 4.

The fix? Restart VSCode. It should come back with the indent status showing something wrong (in my case, 4). For me, I had to change the setting and then save for it to actually make the change, but that's probably because of my editor.formatOnSave setting.

I haven't figured out why it happens, but for me it's usually when I'm editing a nested object in a JS file. It will suddenly do very strange indentation within the object, even though I've been working in that file for a while and it's been indenting just fine.

score 1 · Answer 12 · answered Jul 07 '21 at 11:34

As some answers suggest there's a couple of settings like "detectIndentation, insertSpaces and tabSize" which all control how indentation works but something that most of them fail to mention (top answer included) is that these settings can be overridden by your user settings in which case changing them won't matter.

If you're wondering how to check if that's the case with your vscode just re-check if you have the following thing written in parentheses next to the setting's name:

If that's the case simply click the User link and change the setting in the newly opened user settings tab and you should see your changes enacted.

score 1 · Answer 13 · answered Aug 29 '21 at 06:03

1

Neither of the above solutions worked for me, so I searched my entire user folder for 'tabSize' in files. Eventually I found one that overrode my setting in 'Settings' and was always applied for (newly) opened files:

"[python]": {
    "editor.detectIndentation": false,
    "editor.insertSpaces": true,
    "editor.tabSize": 4
},

answered Aug 29 '21 at 06:03

Tamás Solymosi

29
1

That set of settings was already mentioned in this answer: https://stackoverflow.com/a/55293317/2745495 – Gino Mempin Aug 30 '21 at 04:42

score 1 · Answer 14 · answered Sep 06 '21 at 20:24

1

For new viewers, I had this same issue for YAML files not indenting properly. But you can still change this in settings!

Go to File > Preferences > Settings
Search "tab size"
Under the [yaml] setting, Click Edit in settings.json

Change editor.tabsize value to the number of spaces you want!

FYI looks like they are not adding settings for specific file types: see here #58995

answered Sep 06 '21 at 20:24

dko

197
8

this works for shell-format extension too. thank you! – oldpride Jul 12 '23 at 13:51

score 1 · Answer 15 · answered Jan 24 '23 at 20:45

1

In my case, VScode was using Prettier package to format my code.

How I fixed it:

Right click code -> Format Selection With -> Change Default Formatter -> TypeScript and Javascript Language Features

Set tab preferences in VScode as you normally would.

answered Jan 24 '23 at 20:45

Dominic M.

873
3
17
34

score 0 · Answer 16 · answered Jan 11 '19 at 14:28

0

The VSCode plugin Vetur; used for VueJS applications was overriding the setting for me.

Setting vetur.format.options.tabSize to my preferred number of spaces made it work.

answered Jan 11 '19 at 14:28

Swoot

1,304
11
12

score 0 · Answer 17 · answered Oct 01 '19 at 22:18

0

Disable all plugins (then enable one by one and verify)

answered Oct 01 '19 at 22:18

fider

1,976
26
29

Magn0lia · Answer 18 · 2021-09-17T01:10:06.183

0

If you are coding C/C++:

File > Preferences > Settings or [Ctrl+Shift+P]
Search for "Settings UI"
Search "c_cpp formatting"
Change the format engine from "clangFormat" to "vcFormat"

Then everything that is changed under "c_cpp>vc format" would be activated.

Screenshot

edited Sep 17 '21 at 01:10

answered Sep 17 '21 at 01:04

Magn0lia

1
1

score 0 · Answer 19 · answered Nov 15 '21 at 04:47

0

I had a ".editorconfig" file in a parent directory (ionic project) with value "indent_size = 2" and it did override whatever values I choose for my workspace! Once I changed it, my problem was solved.

answered Nov 15 '21 at 04:47

Samar Bakr

1
3

William Hou · Answer 20 · 2022-01-05T16:27:19.187

Solution to auto-format/default-format:

You don't have to install anything extra.

Go to settings.json. Copy, paste, and disable according to the snapshot below.

Click on the following snapshot, zoom in/out (using ctrl + mouse wheel) to fit your screen size.

Done.

Note: What I wanted here was to auto-format JavaScript the same way as I auto-format TypeScript. You can copy and paste any other rules according to your needs.

As for Space Size, the first answer by Maleki has made it clear. So I won't repeat it here.

score -1 · Answer 21 · answered Jul 30 '19 at 10:39

-1

I think vscode is using autopep8 to format .py by default.

"PEP 8 -- Style Guide for Python Code | Python.org"

According to this website, the following may explain why vscode always use 4 spaces.

Use 4 spaces per indentation level.

answered Jul 30 '19 at 10:39

Choi

389
3
6

Visual Studio Code: format is not using indent settings

21 Answers21

Linked