版权声明：本文为博主原创文章，如需转载请注明出处，谢谢。喜欢请关注哟~ https://blog.csdn.net/sjt223857130/article/details/80387368
微软出品的Visual Studio Code（简称：vscode）用起来很不错，开发H5也很方便。
但是项目各种文件一多，左则栏的文件目录树由于没有连线，看起来有点不舒服，没有层次感。
我查了许多资料，发现用CSS可以控制样式，大概弄出了连线的样式。结果看图对比。
- 使用样式前，文件目录树没有连线，空荡荡，层次感差~；
- 使用样式后，有了连线，层次感强，结构也直观多了！！
通过修改CSS样式达到目的，如何做？请看。
【第一步】编写一个CSS文件，（内容如下，复制粘贴就好）：
文件名：tree-style.css
:root {
/** Width of the lines **/
--tree-width: 14px;
/** Opacity of the lines whilst not hovered **/
--tree-opacity: 0.15;
/** Opacity of the lines on hover **/
--tree-opacity-hover: 0.15;
/** Color of the lines **/
--tree-color: rgb(0, 255, 0);
}
.explorer-folders-view .monaco-tree-row {
overflow: visible !important;
position: relative;
}
.explorer-folders-view .monaco-tree-row:before {
content: '';
background: var(--tree-color);
opacity: var(--tree-opacity);
position: absolute;
width: 0px;
top: -10px;
height: 100%;
transition: opacity 0.1s linear;
border-left: 0.5px dotted var(--tree-color);
}
.explorer-folders-view .monaco-tree-row:after {
content: '';
background: var(--tree-color);
opacity: var(--tree-opacity);
position: absolute;
width: 18px;
height: 0px;
top: 50%;
transition: opacity 0.1s linear;
border-top: 0.5px dotted var(--tree-color);
}
.explorer-folders-view:hover .monaco-tree-row:before,
.explorer-folders-view:hover .monaco-tree-row:after {
opacity: var(--tree-opacity-hover);
}
.explorer-folders-view .monaco-tree-row:not(.has-children):after {
width: calc(var(--tree-width) * 2 + 5px);
}
.explorer-folders-view .monaco-tree-row:not([aria-level='1']):not([aria-level='2']):before {
box-shadow: -20px 0 0 0 var(--tree-color), -40px 0 0 0 var(--tree-color),
-60px 0 0 0 var(--tree-color), -80px 0 0 0 var(--tree-color),
-100px 0 0 0 var(--tree-color), -120px 0 0 0 var(--tree-color),
-140px 0 0 0 var(--tree-color), -160px 0 0 0 var(--tree-color),
-180px 0 0 0 var(--tree-color), -200px 0 0 0 var(--tree-color),
-220px 0 0 0 var(--tree-color), -240px 0 0 0 var(--tree-color),
-260px 0 0 0 var(--tree-color);
}
.explorer-folders-view .monaco-tree-row[aria-level="1"] { padding-left: 0px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="2"] { padding-left: 20px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="3"] { padding-left: 40px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="4"] { padding-left: 60px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="5"] { padding-left: 80px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="6"] { padding-left: 100px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="7"] { padding-left: 120px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="8"] { padding-left: 140px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="9"] { padding-left: 160px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="10"] { padding-left: 180px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="11"] { padding-left: 200px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="12"] { padding-left: 220px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="13"] { padding-left: 240px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="14"] { padding-left: 260px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="15"] { padding-left: 280px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="1"]:before, .monaco-tree-row[aria-level="1"]:after { display: none; }
.explorer-folders-view .monaco-tree-row[aria-level="2"]:before, .monaco-tree-row[aria-level="2"]:after { left: calc(-30px + (2 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="3"]:before, .monaco-tree-row[aria-level="3"]:after { left: calc(-30px + (3 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="4"]:before, .monaco-tree-row[aria-level="4"]:after { left: calc(-30px + (4 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="5"]:before, .monaco-tree-row[aria-level="5"]:after { left: calc(-30px + (5 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="6"]:before, .monaco-tree-row[aria-level="6"]:after { left: calc(-30px + (6 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="7"]:before, .monaco-tree-row[aria-level="7"]:after { left: calc(-30px + (7 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="8"]:before, .monaco-tree-row[aria-level="8"]:after { left: calc(-30px + (8 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="9"]:before, .monaco-tree-row[aria-level="9"]:after { left: calc(-30px + (9 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="10"]:before, .monaco-tree-row[aria-level="10"]:after{ left: calc(-30px + (10 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="11"]:before, .monaco-tree-row[aria-level="11"]:after{ left: calc(-30px + (11 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="12"]:before, .monaco-tree-row[aria-level="12"]:after{ left: calc(-30px + (12 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="13"]:before, .monaco-tree-row[aria-level="13"]:after{ left: calc(-30px + (13 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="14"]:before, .monaco-tree-row[aria-level="14"]:after{ left: calc(-30px + (14 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="15"]:before, .monaco-tree-row[aria-level="15"]:after{ left: calc(-30px + (15 * 20px)); margin-left: 3px }把这个CSS样式文件 tree-style.css 复制到vscode的安装目录下路径为：
C:\Program Files (x86)\Microsoft VS Code\resources\app\out\vs\workbench\
扫描二维码关注公众号，回复：
3542854 查看本文章
【第二步】添加样式。
找到vscode的样式文件 workbench.main.css，该文件路径位置在安装目录下：
C:\Program Files (x86)\Microsoft VS Code\resources\app\out\vs\workbench\
用管理员权限用记事本打开，在开头添加代码：@import url("tree-style.css"); 表示引用第一步的CSS文件。
保存workbench.main.css，完成。
【第三步】重启你的VScode，发现已经能显示目录树连线了。
关于提示：此时vscode会弹出提示“安装程序似乎已经损坏”的警告信息。
这是因为从1.61版本开始，vscode官方为了防止恶意修改vscode的程序，
而为每个文件做了效验，如果发现文件被修改，就会弹出提示了。
处理方法：然而我们只是添加了CSS样式，对程序没有任何影响，所以点击【不再提示】来忽略它，就可以了。
最后，如果你以后重装了vscode，可能会丢失上面的CSS文件。
所以，最好再备份一下这两个文件，以后重装直接覆盖就好了。
tree-style.css
workbench.main.css
【CSDN下载地址】
https://download.csdn.net/download/sjt223857130/10426537