501

How to add more indentation in a file tree structure? It has a little bit indentation I want to increase more just like NetBeans.

check the image

enter image description here

JΛYDΞV
  • 8,532
  • 3
  • 51
  • 77
Akshay Kumar
  • 5,740
  • 2
  • 12
  • 19
  • 239
    It's really impossible to see where you are with so little indentation, isn't it? Such a ridiculous default. – Andy Oct 12 '20 at 14:40
  • 10
    Thank you for your question! Finally I can enjoy this IDE. It is a shame the default tree indentation is so ridiculously tiny. Happy coding! – Combine Dec 22 '20 at 04:41
  • 8
    It makes you wonder what these designers are thinking sometimes... – ahnbizcad Jul 09 '21 at 22:13

6 Answers6

804

Go to File > Preference > Settings and choose:

Workbench › Tree: Indent

Controls tree indentation in pixels.

or (in your settings.json enter this directly)

 "workbench.tree.indent": 10

and choose a high enough number for you.

Also see my answer at Visual Studio code sidebar Vertical guideline (customize sidebar) where with v1.36 you can add colorized tree indent guides to make the explorer file structure more obvious.

demo of explorer guidelines

The example picture uses: "tree.indentGuidesStroke": "#00ff00" in the colorCustomizations, so the guidelines will appear green.

{                                         // in settings.json
  "workbench.colorCustomizations": {
    "tree.indentGuidesStroke": "#00ff00"
}

In a small change coming to v1.64 note that the minimum tree indent will be raised to 4 from 0 previously. So you will not be able to go less than 4.

Mark
  • 143,421
  • 24
  • 428
  • 436
  • 15
    Thanks a lot, @Mark, I didn't even know this option exists. Worked for me – Omar Jul 02 '19 at 15:16
  • 19
    I should mention that this is available in `File --> Preference --> Settings`. In the search field, you type `workbench:tree` and then you will get the option to modify. – Pramod Dec 04 '19 at 06:53
  • 1
    Thank you so much! This is my single and most wanted IDE fix/customization since first I discovered this IDE. – Combine Dec 22 '20 at 04:38
  • 8
    To be specific, it's `Settings > Workbench > Appearance > Tree: Indent` – hedisam Apr 10 '21 at 20:42
  • TY for telling us the FULL path of how to get there, not just "workbench indent" – ahnbizcad Jul 09 '21 at 22:15
  • 4
    Setting this to 16 is sublime; wow, makes a huge difference in how uncluttered it feels now. – Charles Chen Jul 15 '21 at 15:14
  • Now let me change the color per project in my workspace and I'll be way happier! – ivandov Sep 24 '21 at 01:18
  • Thank you! I hated using VS Code for looking through file trees because of the tiny indent. – Doug Dec 06 '21 at 19:18
  • That several hundred developers needed to do this should be a hint to the VSCode team that they don't have a good default... – Tim Finer Jul 19 '23 at 22:26
61

If you just want to change the indentation you can set these options:
Press Ctrl+Shift+P -> Go to Preferences: Open Settings (JSON)

"workbench.tree.indent": 18,

You can add guidelines as well with:

"workbench.tree.renderIndentGuides": "always",

You can also change their color using:

"workbench.colorCustomizations": {
    "tree.indentGuidesStroke": "#008070"
},
Addison
  • 7,322
  • 2
  • 39
  • 55
44

For Mac, using your menu bar would be

Code > Preferences > Settings

Then at the Search settings type: tree or go to

Workbench > Appearance > Tree: Indent (Controls tree indentation in pixels)

and set your preferred indentation

MarlonFolken
  • 549
  • 5
  • 6
26
{  
 "workbench.tree.indent": 20,  // just paste this line of code in setting.json file
  "editor.mouseWheelZoom": true // for zoom in & out font size with Ctrl+ mouse scroll
}
Akshay Kumar
  • 5,740
  • 2
  • 12
  • 19
19

As of Visual Studio Code Version: 1.59.0+

You have to go: Code (on menu bar) > preferences > [user menu] > Appearance > tree:indent

I set it to 22.

enter image description here

Fergus
  • 2,821
  • 2
  • 27
  • 41
13

Besides the other answers involving settings files, the indentation may also be changed in the Files / Preferences / Settings GUI:

enter image description here

Chris Peacock
  • 4,107
  • 3
  • 26
  • 24