Skip to content

Instantly share code, notes, and snippets.

@jakewtaylor

jakewtaylor/readme.md

Last active January 6, 2024 23:29
Show Gist options
  • Save jakewtaylor/e92acd697409e53a73ebf8e0145d4c28 to your computer and use it in GitHub Desktop.
Save jakewtaylor/e92acd697409e53a73ebf8e0145d4c28 to your computer and use it in GitHub Desktop.
Download ZIP
VS Code CSS addition to increase readability on file tree.
Raw
readme.md

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:
Raw
style.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; }
@old-boy
Copy link

old-boy commented May 8, 2019

首选项：

Tree: Indent
控制树缩进(以像素为单位)。
24px，刚好

@oxygen1999
Copy link

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