Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
VS Code CSS addition to increase readability on file tree.

Increases indentation on the file tree and adds some lines to each directory/file.

Works 15 levels deep, but you can expand it by just adding more of each line thats repeating, i.e.:

  • add another box shadow
    • (n*-20px) 0 0 0 rgba(255, 255, 255, 0.4)
  • add another padding-left
    • .monaco-tree-row[aria-level="n"] { padding-left: ((n-1)*20)px; }
  • add another :before & :after with left positioning
    • .monaco-tree-row[aria-level="n"]:before { left: (((n-1)*20)-9)px; }
    • .monaco-tree-row[aria-level="n"]:after { left: (((n-1)*20)-9)px; }

A bit messy but it works. If VSCode had some LESS/SASS stylesheets and/or functionality for user styles, this would be much nicer, but we've got to work with what we've got.

  • Find your VSCode install (mine was C:/Program Files/Microsoft VS Code, macOS should be /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.css)
  • Go to resources/app/out/vs/workbench
  • Open workbench.main.css
  • Add the following CSS:
.monaco-tree-row {
overflow: hidden;
position: relative;
}
.monaco-tree-row:before {
content: '';
background: rgba(255, 255, 255, 0.4);
position: absolute;
width: 1px;
height: 100%;
}
.monaco-tree-row:after {
content: '';
background: rgba(255, 255, 255, 0.4);
position: absolute;
width: 14px;
height: 1px;
top: 50%;
}
.monaco-tree-row:not([aria-level="1"]):not([aria-level="2"]):before {
box-shadow: -20px 0 0 0 rgba(255, 255, 255, 0.4),
-40px 0 0 0 rgba(255, 255, 255, 0.4),
-60px 0 0 0 rgba(255, 255, 255, 0.4),
-80px 0 0 0 rgba(255, 255, 255, 0.4),
-100px 0 0 0 rgba(255, 255, 255, 0.4),
-120px 0 0 0 rgba(255, 255, 255, 0.4),
-140px 0 0 0 rgba(255, 255, 255, 0.4),
-160px 0 0 0 rgba(255, 255, 255, 0.4),
-180px 0 0 0 rgba(255, 255, 255, 0.4),
-200px 0 0 0 rgba(255, 255, 255, 0.4),
-220px 0 0 0 rgba(255, 255, 255, 0.4),
-240px 0 0 0 rgba(255, 255, 255, 0.4),
-260px 0 0 0 rgba(255, 255, 255, 0.4);
}
.monaco-tree-row[aria-level="1"] { padding-left: 0px !important; }
.monaco-tree-row[aria-level="2"] { padding-left: 20px !important; }
.monaco-tree-row[aria-level="3"] { padding-left: 40px !important; }
.monaco-tree-row[aria-level="4"] { padding-left: 60px !important; }
.monaco-tree-row[aria-level="5"] { padding-left: 80px !important; }
.monaco-tree-row[aria-level="6"] { padding-left: 100px !important; }
.monaco-tree-row[aria-level="7"] { padding-left: 120px !important; }
.monaco-tree-row[aria-level="8"] { padding-left: 140px !important; }
.monaco-tree-row[aria-level="9"] { padding-left: 160px !important; }
.monaco-tree-row[aria-level="10"] { padding-left: 180px !important; }
.monaco-tree-row[aria-level="11"] { padding-left: 200px !important; }
.monaco-tree-row[aria-level="12"] { padding-left: 220px !important; }
.monaco-tree-row[aria-level="13"] { padding-left: 240px !important; }
.monaco-tree-row[aria-level="14"] { padding-left: 260px !important; }
.monaco-tree-row[aria-level="15"] { padding-left: 280px !important; }
.monaco-tree-row[aria-level="1"]:before { display: none; }
.monaco-tree-row[aria-level="2"]:before { left: 11px; }
.monaco-tree-row[aria-level="3"]:before { left: 31px; }
.monaco-tree-row[aria-level="4"]:before { left: 51px; }
.monaco-tree-row[aria-level="5"]:before { left: 71px; }
.monaco-tree-row[aria-level="6"]:before { left: 91px; }
.monaco-tree-row[aria-level="7"]:before { left: 111px; }
.monaco-tree-row[aria-level="8"]:before { left: 131px; }
.monaco-tree-row[aria-level="9"]:before { left: 151px; }
.monaco-tree-row[aria-level="10"]:before { left: 171px; }
.monaco-tree-row[aria-level="11"]:before { left: 191px; }
.monaco-tree-row[aria-level="12"]:before { left: 211px; }
.monaco-tree-row[aria-level="13"]:before { left: 231px; }
.monaco-tree-row[aria-level="14"]:before { left: 251px; }
.monaco-tree-row[aria-level="15"]:before { left: 271px; }
.monaco-tree-row[aria-level="1"]:after { display: none; }
.monaco-tree-row[aria-level="2"]:after { left: 11px; }
.monaco-tree-row[aria-level="3"]:after { left: 31px; }
.monaco-tree-row[aria-level="4"]:after { left: 51px; }
.monaco-tree-row[aria-level="5"]:after { left: 71px; }
.monaco-tree-row[aria-level="6"]:after { left: 91px; }
.monaco-tree-row[aria-level="7"]:after { left: 111px; }
.monaco-tree-row[aria-level="8"]:after { left: 131px; }
.monaco-tree-row[aria-level="9"]:after { left: 151px; }
.monaco-tree-row[aria-level="10"]:after { left: 171px; }
.monaco-tree-row[aria-level="11"]:after { left: 191px; }
.monaco-tree-row[aria-level="12"]:after { left: 211px; }
.monaco-tree-row[aria-level="13"]:after { left: 231px; }
.monaco-tree-row[aria-level="14"]:after { left: 251px; }
.monaco-tree-row[aria-level="15"]:after { left: 271px; }
@oxygen1999
Copy link

oxygen1999 commented Aug 29, 2020

in the window system
I cannot find the workbench.main.css file, but I can only find the workbench.desktop.main.css and the modification does not take effect

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment