VS Code CSS addition to increase readability on file tree.

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:

style.css

.monaco-tree-row {
	overflow: visible;
	position: relative;
}

.monaco-tree .monaco-tree-rows > .monaco-tree-row {
	overflow: visible;
}

.monaco-tree-row:before {
	content: '';
	position: absolute;
	width: 1px;
	height: 100%;
}

.monaco-tree-row:after {
	content: '';
	background: rgba(255, 255, 255, 0.07);
	position: absolute;
	width: 24px;
	height: 1px;
	top: 50%;
}

.monaco-tree-row[aria-expanded]:after {
	width: 12px;
}

.monaco-tree-row[aria-level="2"]:before {
	box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.07);
}

.monaco-tree-row[aria-level="3"]:before {
	box-shadow: -1px -11px 0 0 rgba(255, 255, 255, 0.07),
				-21px 0 0 0 rgba(255, 255, 255, 0.07);
}

.monaco-tree-row[aria-level="4"]:before {
	box-shadow:	-1px -11px 0 0 rgba(255, 255, 255, 0.07),
				-21px -11px 0 0 rgba(255, 255, 255, 0.07),
				-41px 0 0 0 rgba(255, 255, 255, 0.07);
}

.monaco-tree-row[aria-level="5"]:before {
	box-shadow: -1px -11px 0 0 rgba(255, 255, 255, 0.07),
				-21px -11px 0 0 rgba(255, 255, 255, 0.07),
				-41px -11px 0 0 rgba(255, 255, 255, 0.07),
				-61px 0 0 0 rgba(255, 255, 255, 0.07);
}

.monaco-tree-row[aria-level="6"]:before {
	box-shadow: -1px -11px 0 0 rgba(255, 255, 255, 0.07),
				-21px -11px 0 0 rgba(255, 255, 255, 0.07),
				-41px -11px 0 0 rgba(255, 255, 255, 0.07),
				-61px -11px 0 0 rgba(255, 255, 255, 0.07),
				-81px 0 0 0 rgba(255, 255, 255, 0.07);
}

.monaco-tree-row[aria-level="7"]:before {
	box-shadow: -1px -11px 0 0 rgba(255, 255, 255, 0.07),
				-21px -11px 0 0 rgba(255, 255, 255, 0.07),
				-41px -11px 0 0 rgba(255, 255, 255, 0.07),
				-61px -11px 0 0 rgba(255, 255, 255, 0.07),
				-81px -11px 0 0 rgba(255, 255, 255, 0.07),
				-101px 0 0 0 rgba(255, 255, 255, 0.07);
}

.monaco-tree-row[aria-level="8"]:before {
	box-shadow: -1px -11px 0 0 rgba(255, 255, 255, 0.07),
				-21px -11px 0 0 rgba(255, 255, 255, 0.07),
				-41px -11px 0 0 rgba(255, 255, 255, 0.07),
				-61px -11px 0 0 rgba(255, 255, 255, 0.07),
				-81px -11px 0 0 rgba(255, 255, 255, 0.07),
				-101px -11px 0 0 rgba(255, 255, 255, 0.07),
				-121px 0 0 0 rgba(255, 255, 255, 0.07);
}

.monaco-tree-row[aria-level="9"]:before {
	box-shadow: -1px -11px 0 0 rgba(255, 255, 255, 0.07),
				-21px -11px 0 0 rgba(255, 255, 255, 0.07),
				-41px -11px 0 0 rgba(255, 255, 255, 0.07),
				-61px -11px 0 0 rgba(255, 255, 255, 0.07),
				-81px -11px 0 0 rgba(255, 255, 255, 0.07),
				-101px -11px 0 0 rgba(255, 255, 255, 0.07),
				-121px -11px 0 0 rgba(255, 255, 255, 0.07),
				-141px 0 0 0 rgba(255, 255, 255, 0.07);
}

.monaco-tree-row[aria-level="10"]:before {
	box-shadow: -1px -11px 0 0 rgba(255, 255, 255, 0.07),
				-21px -11px 0 0 rgba(255, 255, 255, 0.07),
				-41px -11px 0 0 rgba(255, 255, 255, 0.07),
				-61px -11px 0 0 rgba(255, 255, 255, 0.07),
				-81px -11px 0 0 rgba(255, 255, 255, 0.07),
				-101px -11px 0 0 rgba(255, 255, 255, 0.07),
				-121px -11px 0 0 rgba(255, 255, 255, 0.07),
				-141px -11px 0 0 rgba(255, 255, 255, 0.07),
				-161px 0 0 0 rgba(255, 255, 255, 0.07);
}


.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="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="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; }

No problem on Windows, works perfectly! I'm not able to find workbench.main.css file on my mac though.

You can find the workbench.main.css as described in the readme.
Go to applications > right click on Visual Studio Code.app and choose > Show Package Contents.
Now you should find the CSS file.

For vscode 1.31
https://gist.github.com/akmeghdad/b1208c2caa601f0ba29f953faabac709

If I adding this code to this workbench.main.css file, I getting vscode information that my file is corrupted and recomend reinstall VS code.
Also, the sidebar directory tree do not changed.
My version of VS code 1.31.0

akmeghdad / workbench.tree.css wrote about this file, but no any info, where to place this file. Help please

did what you said ... did not work