readme.md

As of the June 2021 Update, this no longer works. I have decided not to update the gist, and just use the built in indentation guides. Feel free to link updates in the comments

---

Credit goes to Samdenty for installation instructions. I've made a copy here for convienience.

---

How to install

Custom CSS plugin

Install the custom CSS plugin, then make a file on your computer that will hold your custom CSS, I like to make one in my home directory called ~/.vscodestyles.css and then add the CSS into it.

Once done, open your command palette and select enable custom CSS and JS

Screenshot

Manually editing workbench.main.css

Open up C:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\workbench.main.css in a text edit and then add the CSS into it.

What does it do

It adds the missing tree functionality to VSCode

• The last tree item gets the bottom line removed
• Lines are almost transparent normally, but increase in opacity on hover
• CSS variables to make it easy to change the colors, line width etc.

fileTree_2019-01_update.css

/* Source 1: https://gist.github.com/jakewtaylor/e92acd697409e53a73ebf8e0145d4c28 */
/* Source 2: https://gist.github.com/samdenty/b96f4df576d05cb123248f8ebfa899b6 */
/* Source 3: https://gist.github.com/Lightfire228/39dc2cf403237a190e79a000912691b2#gistcomment-2841903*/
/* File URI: file:///C:/Path/to/file/style.css */
/* Github Issue: https://github.com/Microsoft/vscode/issues/17777 */

:root {
  /** Indentation level.  Set this to the same value as "workbench.tree.indent" **/
  --indent: 20px;
  /** The x offset for the vertical indentation guides **/
  --v-guides-offset: 17px;
  /** The x offset for the horizontal indentation guides **/
  --h-guides-offset: 1px;
  /** Opacity of the lines whilst not hovered **/
  --tree-opacity: 0.1;
  /** Opacity of the lines on hover **/
  --tree-opacity-hover: 0.3;
  /** Color of the lines **/
  --tree-color: rgb(255, 255, 255);
  /** Transition Duration */
  --transition-duration: 100ms;
}

.explorer-folders-view .monaco-tl-twistie {
  margin-left: 0px !important;
}

.explorer-folders-view .monaco-list-row {
  overflow: visible !important;
}

.explorer-folders-view .monaco-list-row:before {
  content: '';
  background: var(--tree-color);
  opacity: var(--tree-opacity);
  position: absolute;
  width: 0px;
  top: -10px;
  height: 100%;
  transition: opacity var(--transition-duration) linear;
  border-left: 1px solid var(--tree-color);
  z-index: 10;
}

.explorer-folders-view .monaco-list-row:after {
  content: '';
  background: var(--tree-color);
  opacity: var(--tree-opacity);
  position: absolute;
  width: calc(var(--indent) - (10px - var(--h-guides-offset)));
  height: 0px;
  top: 49%;
  margin-left: var(--h-guides-offset);
  transition: opacity var(--transition-duration) linear;
  border-top: 1px solid var(--tree-color);
  z-index: 10;
}

.explorer-folders-view:hover .monaco-list-row:before,
.explorer-folders-view:hover .monaco-list-row:after {
  opacity: var(--tree-opacity-hover);
}

.explorer-folders-view .monaco-list-row:not([aria-level='1']):before {
  box-shadow:
    calc(var(--indent) * -1 ) 0 0 0 var(--tree-color),
    calc(var(--indent) * -2 ) 0 0 0 var(--tree-color),
    calc(var(--indent) * -3 ) 0 0 0 var(--tree-color),
    calc(var(--indent) * -4 ) 0 0 0 var(--tree-color),
    calc(var(--indent) * -5 ) 0 0 0 var(--tree-color),
    calc(var(--indent) * -6 ) 0 0 0 var(--tree-color),
    calc(var(--indent) * -7 ) 0 0 0 var(--tree-color),
    calc(var(--indent) * -8 ) 0 0 0 var(--tree-color),
    calc(var(--indent) * -9 ) 0 0 0 var(--tree-color),
    calc(var(--indent) * -10) 0 0 0 var(--tree-color),
    calc(var(--indent) * -11) 0 0 0 var(--tree-color),
    calc(var(--indent) * -12) 0 0 0 var(--tree-color),
    calc(var(--indent) * -13) 0 0 0 var(--tree-color);
}

/* .explorer-folders-view .monaco-list-row[aria-level="1" ] { padding-left: calc(var(--indent) * 0)  !important; }
.explorer-folders-view .monaco-list-row[aria-level="2" ] { padding-left: calc(var(--indent) * 1)  !important; }
.explorer-folders-view .monaco-list-row[aria-level="3" ] { padding-left: calc(var(--indent) * 2)  !important; }
.explorer-folders-view .monaco-list-row[aria-level="4" ] { padding-left: calc(var(--indent) * 3)  !important; }
.explorer-folders-view .monaco-list-row[aria-level="5" ] { padding-left: calc(var(--indent) * 4)  !important; }
.explorer-folders-view .monaco-list-row[aria-level="6" ] { padding-left: calc(var(--indent) * 5)  !important; }
.explorer-folders-view .monaco-list-row[aria-level="7" ] { padding-left: calc(var(--indent) * 6)  !important; }
.explorer-folders-view .monaco-list-row[aria-level="8" ] { padding-left: calc(var(--indent) * 7)  !important; }
.explorer-folders-view .monaco-list-row[aria-level="9" ] { padding-left: calc(var(--indent) * 8)  !important; }
.explorer-folders-view .monaco-list-row[aria-level="10"] { padding-left: calc(var(--indent) * 9)  !important; }
.explorer-folders-view .monaco-list-row[aria-level="11"] { padding-left: calc(var(--indent) * 10) !important; }
.explorer-folders-view .monaco-list-row[aria-level="12"] { padding-left: calc(var(--indent) * 11) !important; }
.explorer-folders-view .monaco-list-row[aria-level="13"] { padding-left: calc(var(--indent) * 12) !important; }
.explorer-folders-view .monaco-list-row[aria-level="14"] { padding-left: calc(var(--indent) * 13) !important; }
.explorer-folders-view .monaco-list-row[aria-level="15"] { padding-left: calc(var(--indent) * 14) !important; } */

.explorer-folders-view .monaco-list-row[aria-level="1" ]:before, .monaco-list-row[aria-level="1" ]:after { display: none; }
.explorer-folders-view .monaco-list-row[aria-level="2" ]:before, .monaco-list-row[aria-level="2" ]:after { left: calc(var(--v-guides-offset) + (0  * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="3" ]:before, .monaco-list-row[aria-level="3" ]:after { left: calc(var(--v-guides-offset) + (1  * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="4" ]:before, .monaco-list-row[aria-level="4" ]:after { left: calc(var(--v-guides-offset) + (2  * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="5" ]:before, .monaco-list-row[aria-level="5" ]:after { left: calc(var(--v-guides-offset) + (3  * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="6" ]:before, .monaco-list-row[aria-level="6" ]:after { left: calc(var(--v-guides-offset) + (4  * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="7" ]:before, .monaco-list-row[aria-level="7" ]:after { left: calc(var(--v-guides-offset) + (5  * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="8" ]:before, .monaco-list-row[aria-level="8" ]:after { left: calc(var(--v-guides-offset) + (6  * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="9" ]:before, .monaco-list-row[aria-level="9" ]:after { left: calc(var(--v-guides-offset) + (7  * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="10"]:before, .monaco-list-row[aria-level="10"]:after { left: calc(var(--v-guides-offset) + (8  * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="11"]:before, .monaco-list-row[aria-level="11"]:after { left: calc(var(--v-guides-offset) + (9  * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="12"]:before, .monaco-list-row[aria-level="12"]:after { left: calc(var(--v-guides-offset) + (10 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="13"]:before, .monaco-list-row[aria-level="13"]:after { left: calc(var(--v-guides-offset) + (11 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="14"]:before, .monaco-list-row[aria-level="14"]:after { left: calc(var(--v-guides-offset) + (12 * var(--indent)));}
.explorer-folders-view .monaco-list-row[aria-level="15"]:before, .monaco-list-row[aria-level="15"]:after { left: calc(var(--v-guides-offset) + (13 * var(--indent)));}

@cpsubrian, I incorporated your tweaks into my gist. Some notes:

fixes:
    fixed misalignment issues caused by the extra -1 px on lines 62-74
    just discovered the zindex was too high, and causing issues with the file, edit, etc. dropdowns

preferences:
    edited line 39 because I like the original look better

tweaks:
    added in a variable for the left offset for the verticle indentation guides, yours was 7px, but i like 13px
    added in a variable for the left offset for the horizontal indentation guides, yours wasn't touching the vertical bars

A screenshot of the misalignment:

Screenshot of the completed glory:

Does this look right for settings.json?

    "vscode_custom_css.imports": [
        "file:///Users/tim-work/vscodestyles.css"
    ],
    "vscode_custom_css.policy": true

Inside vscodestyles.css is pasted from this gist. I have installed the custom css plugin and activated it from command palette. Any idea what I could be doing wrong?

@trybick, no, it would be

    "vscode_custom_css.imports": [
        "file:///C:/Users/tim-work/vscodestyles.css"
    ],
    "vscode_custom_css.policy": true

Thanks so much for this! Even with their updates this year, the file browser was nigh-unusable for me, and this just makes is so much clearer!

As a note, you will want to disable the new built-in highlighting that they added, otherwise I was getting a lot of vertical lines through filenames.

To get this to work previously, I had set the "workbench.tree.indent" in the settings to 0. But I noticed that gitlense was using that as it's indent as well

So now, I figured out how to have the vanilla indentation css work with the custom guides css. You may have to --v-guides-offset. Mine went from 13px to 17px

Also, you don't have to restart as admin every time there's an update (at least, I don't). Simply hit the command key (F1 by default), and type "Reload custom CSS and JS", hit enter, then command key, "Reload window" (which I bound to ctrl + F5)