How to add more indentation in the explorer file tree structure?

Go to File > Preference > Settings and choose:

Workbench › Tree: Indent

Controls tree indentation in pixels.

 "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 (I don't normally use a green color!).


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


If you just want to change the indentation you can use:

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