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; }
@cpsubrian
Copy link

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
Copy link

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

@freeflyclone
Copy link

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

@michelbl
Copy link

michelbl commented Feb 2, 2018 •
edited
Loading

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

@inorganik
Copy link

Thank you @cpsubrian ! Only correction:

Step 4 should be Cmd+Shift+P

@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