How to add more indentation in the Visual Studio code explorer file tree structure?
Visual Studio-CodeVscode SettingsVisual Studio-Code Problem Overview
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
Visual Studio-Code Solutions
Solution 1 - Visual Studio-Code
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 https://stackoverflow.com/questions/41898245/visual-studio-code-sidebar-vertical-guideline-customize-sidebar/56897357#56897357 where with v1.36 you can add colorized tree indent guides to make the explorer file structure more obvious.
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.
Solution 2 - Visual Studio-Code
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
Solution 3 - Visual Studio-Code
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"
},
Solution 4 - Visual Studio-Code
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.
Solution 5 - Visual Studio-Code
{
"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
}