Skip to content

Instantly share code, notes, and snippets.

@jakewtaylor

jakewtaylor/readme.md

Last active January 6, 2024 23:29
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; }
@samdenty
Copy link

samdenty commented Mar 3, 2018 •
edited
Loading

I polished it up a bit => https://gist.github.com/samdenty99/b96f4df576d05cb123248f8ebfa899b6

image

@dmorrison
Copy link

Where is workbench.main.css on macOS? Thanks!

@jakewtaylor
Copy link
Author

@dmorrison You can try running which code from terminal (assuming you have code in your path), which, on windows, returns a path that goes inside the install directory.

@jsarasin
Copy link

jsarasin commented Jun 14, 2018 •
edited
Loading

Thank you very much!
Linux Mint(Ubuntu), file location is:
/usr/share/code/resources/app/out/vs/workbench/workbench.main.css

I believe macOS is going to be similar?
Executables are stored in a separate location from their data dependencies, usually, on *nix.

@blaise-io
Copy link

On Mac OS /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.css

@shreeve
Copy link

shreeve commented Jan 11, 2019

The hierarchical lines are impossible to get right. I gave up and just focused on improving the indentation.

The result looks a lot better and is far simpler than trying to fix the lines. The file to edit is (on macOs) is:

/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.css:

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

The final result looks like:

form ts src unsupported 2019-01-11 02-16-17

@Lightfire228
Copy link

Lightfire228 commented Feb 7, 2019 •
edited
Loading

I've fixed it to work with the new Jan 2019 update
There were 3 main fixes I added,

  1. The tree row class was updated from monaco-tree-row to monaco-list-row
  2. In the custom css file, line 21, the monica-tree-row had a position: relative rule, which caused vertical spacing issues
  3. The .monaco-tl-twistie div had an inline margin-left: 40px rule, which I had to override (line 15)

https://gist.github.com/Lightfire228/39dc2cf403237a190e79a000912691b2

I used @samdenty 's gist as a base, but you may have to tweak it to get it to look 'right'

Edit: I fixed an issue with the lines disappearing on when hovering or selecting a folder more than 3 deep

@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