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

Visual Studio-CodeVscode Settings

Visual 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

enter image description here

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.

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.

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.

enter image description here

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
}

Solution 6 - Visual Studio-Code

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

enter image description here

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAkshay KumarView Question on Stackoverflow
Solution 1 - Visual Studio-CodeMarkView Answer on Stackoverflow
Solution 2 - Visual Studio-CodeMarlonFolkenView Answer on Stackoverflow
Solution 3 - Visual Studio-CodeAddisonView Answer on Stackoverflow
Solution 4 - Visual Studio-CodeFergusView Answer on Stackoverflow
Solution 5 - Visual Studio-CodeAkshay KumarView Answer on Stackoverflow
Solution 6 - Visual Studio-CodeChris PeacockView Answer on Stackoverflow