w

VSCode系列-08:VSCode资源管理器行高、字体大小修改

VSCode系列-08:VSCode资源管理器行高、字体大小修改
该条目是 第 8 部分,共 10 在系列中 VSCode配置

VSCode配置

VSCode系列-01:VS Code 纯净版安装、全局 settings.json 核心参数硬核优化与多端配置同步

VSCode系列-02:破除卡顿:VS Code 内存极限优化、禁用无用内置功能与秒级启动调优

VSCode系列-03:前端开发与排版全装:Prettier 自动格式化、Auto Rename Tag 与 Error Lens 降维打击

VSCode系列-04:远程全栈运维神器:Remote-SSH 极限免密配置与 GitLens 团队版本控制全攻略

VSCode系列-05:Markdown 全能强化:Markdown All in One 语法增强与代码块一键美化包

VSCode系列-06:AI 代码外挂(Copilot&Cursor)无缝注入与十个受用一生的 VS Code 核心快捷键

VSCode系列-07:调试器(Debugger)深度实战 + 断点技巧与变量监视面板

VSCode系列-08:VSCode资源管理器行高、字体大小修改

VSCode系列-09:VS Code 开发环境配置 —— 插件篇

VSCode系列-10:VS Code 开发环境配置 —— 设置篇

🤖 摘要:本文讲解了如何通过修改VS Code源文件自定义资源管理器列表行高。主要步骤包括在JS文件中调整节点尺寸逻辑,在CSS末尾添加规则将行高与图标统一设为32px,并微调字体大小。修改后重启即可生效,有效优化界面布局与视觉舒适度。


我是按32px行高设置的,可自行调整自己看着舒服的高度;

一、修改JS文件

安装目录/resources/app/out/vs/workbench/workbench.desktop.main.js

查找:<code>({range:{start:</code>

两端附近的<code>size:c.size</code>改为:<code>size:c.templateId==="file"?40:c.size</code>

此处如果也保持32px的话会导致行高不足遮挡一部分,因此比32大一些即可。

二、修改CSS文件

安装目录/resources/app/out/vs/workbench/workbench.desktop.main.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&gt;.monaco-icon-label-container&gt;.monaco-icon-name-container&gt;.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;      
 }

继续在当前CSS文件中查找:<code>.monaco-workbench .part>.content</code>

修改<code>font-size</code>的值,默认是<code>13px</code>,改为自己合适的值即可,比如:<code>14px</code>

修改完成,重启VSCode生效。

参考

VSCode配置

VSCode系列-07:调试器(Debugger)深度实战 + 断点技巧与变量监视面板 VSCode系列-09:VS Code 开发环境配置 —— 插件篇