AndyPerlitch
AndyPerlitch

Reputation: 4729

Visual Studio Code: format is not using indent settings

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!

Upvotes: 267

Views: 213481

Answers (22)

Michael Buen
Michael Buen

Reputation: 39393

This VS Code extension for TSV files doesn't follow the built-in editor tab size setting of VS Code. Need to turn it off to make tab-separated text follow the VS Code's built-in editor tab size setting. For some reasons, I forgot that I installed this

VS Code extension for aligning column cells

Upvotes: 0

StingyJack
StingyJack

Reputation: 19459

If you came here from Google because tab is not 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.

enter image description here

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

Upvotes: 4

Dominic M.
Dominic M.

Reputation: 913

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.

Vscode Format Selection With..

Upvotes: 2

William Hou
William Hou

Reputation: 1771

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.

enter image description here

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.

Upvotes: 0

Samar Bakr
Samar Bakr

Reputation: 1

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.

Upvotes: 0

Magn0lia
Magn0lia

Reputation: 11

If you are coding C/C++:

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

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

Screenshot

Upvotes: 1

dko
dko

Reputation: 361

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

TabSizeSettings

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

Settings.json


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

Upvotes: 2

Tamás Solymosi
Tamás Solymosi

Reputation: 59

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
},

Upvotes: 3

InsertKnowledge
InsertKnowledge

Reputation: 1028

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: image highlighting text in parentheses next to Tab Size setting

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.

Upvotes: 1

DoomGoober
DoomGoober

Reputation: 1693

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.

enter image description here

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

Upvotes: 5

fider
fider

Reputation: 2036

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

Upvotes: 0

Choi
Choi

Reputation: 407

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.

Upvotes: -2

jnkb
jnkb

Reputation: 1974

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

Set also "editor.detectIndentation" to false

(Files -> Preferences -> Settings)

screenshot

Upvotes: 168

rashidnk
rashidnk

Reputation: 4292

the settings below solved my issue

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

Upvotes: 16

Ciabaros
Ciabaros

Reputation: 2159

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:

enter image description here

Upvotes: 37

Swoot
Swoot

Reputation: 1382

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.

Upvotes: 0

tailattention
tailattention

Reputation: 440

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.

Upvotes: 26

bantic
bantic

Reputation: 4964

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.

Upvotes: 5

MrOBrian
MrOBrian

Reputation: 2189

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.

Upvotes: 3

Albert Timashev
Albert Timashev

Reputation: 198

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 :)

Upvotes: 7

seangwright
seangwright

Reputation: 18195

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.

Upvotes: 83

Maleki
Maleki

Reputation: 4298

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: #":

status bar on the right

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

select indentation type

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

select tab size

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

Upvotes: 399

Related Questions