vscode修改左側菜單字體和行高間距

vscode修改左側菜單字體行高間距

這裏我修改的行高32px;

 

1、如果直接修改css行高，發現菜單position 的top值是動態生成的，所以修改js.

js文件：  /opt/apps/com.visualstudio.code/files/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js

可以搜索“s(e.reduce((e,t)=>e.concat(t)”,快速定位到紅色標記旁。

然後在t.size前加上：

t.templateId==="file"?32:

，在e.size前加上：

e.templateId==="file"?32:

 

2、修改css 文件：/opt/apps/com.visualstudio.code/files/share/code/resources/app/out/vs/workbench/workbench.desktop.main.css

在css文件末尾加上：

/* 自定義 */
 .explorer-viewlet .monaco-workbench .monaco-tl-row{
    height: 32px;
    line-height: 32px;
 }
 .explorer-viewlet .explorer-item {
    height: 32px;
    line-height: 32px;
}
 .explorer-viewlet .monaco-tl-twistie{
    height: 32px;
    line-height: 32px;
}
.explorer-viewlet .monaco-tl-contents{
    height: 32px;
    line-height: 32px;
}

.explorer-viewlet   .show-file-icons .folder-icon::before,.explorer-viewlet   .show-file-icons .file-icon::before{
    height: 32px;
    line-height: 32px;
	margin-right: 6px;
	background-size: auto;
}
.explorer-viewlet .show-file-icons .ignore-lang-file-icon.file-icon::before{
    height: 32px;
    line-height: 32px;
	margin-right: 6px;
	background-size: auto;
}
.explorer-viewlet .monaco-list .monaco-list-row.selected{
    height: 32px!important;
    line-height: 32px!important;
}
.explorer-viewlet .show-file-icons .php-lang-file-icon.file-icon::before{
    height: 32px;
    line-height: 32px;
	margin-right: 6px;
	background-size: auto;
}
.explorer-viewlet .monaco-list.mouse-support .monaco-list-row{
    height: 32px!important;
    line-height: 32px!important;
}
.explorer-viewlet .monaco-icon-label>.monaco-icon-label-container>.monaco-icon-name-container>.label-name{
    height: 32px!important;
    line-height: 32px!important;
    font-size: 16px;
}
.explorer-viewlet .show-file-icons .monaco-tl-twistie.collapsible:not(.collapsed) + .monaco-tl-contents .folder-icon::before{
	height: 32px!important;
    line-height: 32px!important;	
}

 

最後再看看效果：