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; }
@jakewtaylor

This comment has been minimized.

Copy link
Owner Author

commented Sep 22, 2017

file tree screenshot

@cpsubrian

This comment has been minimized.

Copy link

commented Dec 21, 2017

From the original thread:

Step by step instruction (for macOS)

  1. Install https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css and restart VS Code
  2. Save contents of this gist into some file, in my example it's /Users/semenov/.vscode/css/tree.css
  3. Open Preferences > Settings, and add this setting:
 "vscode_custom_css.imports": [
        "file:///Users/semenov/.vscode/css/tree.css"
    ]
  1. Cmd-P, ">Enable custom CSS and JS", restart VS Code
  2. Dismiss "Your VS Code is corrupted" message

After upgrading VS Code, repeat steps 4 and 5.

@usernamehw

This comment has been minimized.

Copy link

commented Jan 4, 2018

This snippet shifted trees in some other places (like quick file picker & go to symbol) until I added .explorer-viewlet before each selector.

@freeflyclone

This comment has been minimized.

Copy link

commented Jan 26, 2018

Just found this. Thank you Jake, just what I needed.

@michelbl

This comment has been minimized.

Copy link

commented Feb 2, 2018

For me (vscode 1.17.2, MacOS) only the 1st method works (inside workbench.main.css).

@inorganik

This comment has been minimized.

Copy link

commented Mar 1, 2018

Thank you @cpsubrian ! Only correction:

Step 4 should be Cmd+Shift+P

@samdenty

This comment has been minimized.

Copy link

commented Mar 3, 2018

@dmorrison

This comment has been minimized.

Copy link

commented Jun 6, 2018

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

@jakewtaylor

This comment has been minimized.

Copy link
Owner Author

commented Jun 8, 2018

@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

This comment has been minimized.

Copy link

commented Jun 14, 2018

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

This comment has been minimized.

Copy link

commented Jun 18, 2018

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

@shreeve

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Feb 7, 2019

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

This comment has been minimized.

Copy link

commented May 8, 2019

首选项:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.