坏蛋格鲁坏蛋格鲁

【VS Code】侧边栏美化

一、VS Code 侧边栏资源管理器文字行高设置

1. 修改 js 主文件

由于 VS Code 官方并没有对左侧边栏内的行高等样式进行自定义设置提供支持,并且行高是通过 js 动态计算生成的,因此要修改资源管理器的行高,需要修改对应的 js 文件

  1. 修改 js 文件: C:\Users\Administrator\AppData\Local\Programs\Microsoft VS Code\034f571df5\resources\app\out\vs\workbench\workbench.desktop.main.js
  2. 查找修改位置:搜索关键字 ({range:{start:,定位到要修改的位置
  3. 修改内容:在定位位置出,查看上下文代码,注意代码 b=C.map((s,c)=>({range:{start:w+c,end:w+c+1},size:s.size})) ,将里边的 size:s.size 修改为 size:s.templateId==="file"?32:s.size,即就是将 s 的 size 属性替换为 templateId==="file"?32:s.size,这里的 32 便是修改的行高高度,注意这里的 s 在不同版本中可能不同,注意同步替换

2. 修改 css 文件

仅仅修改 js 文件是不够的,对应的 css 主文件也需要配套设置

  1. 修改 css 文件:C:\Users\Administrator\AppData\Local\Programs\Microsoft VS Code\034f571df5\resources\app\out\vs\workbench\workbench.desktop.main.css
  2. 添加自定义内容:在 css 文件最后,添加如下自定义的 css 代码,其中所有的 32 便是行高高度
/* 自定义 */
 .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;    
}
.explorer-viewlet .monaco-tree-sticky-container{
    height: 32px!important;
    line-height: 32px!important;
}
.explorer-viewlet .monaco-tree-sticky-container .monaco-list-row{
    height: 32px!important;
    line-height: 32px!important;
}


.monaco-workbench .activitybar>.content :not(.monaco-menu)>.monaco-action-bar .action-label{
    width: 48px;
    height: 48px;
    font-size: 24px !important;
    font-weight: bold;
    padding: 0 !important;
    transform: scale(0.68);
}


.monaco-workbench .part.editor>.content .editor-group-container>.title .breadcrumbs-below-tabs .breadcrumbs-control {
    cursor: default;
    flex: 1 100%;
    height: 22px;
    padding: 8px 0;
    background: white;
    font-size: 15px;
}


.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .tab-label a {
    font-size: 15px !important;
 }
本原创文章未经允许不得转载 | 当前页面:坏蛋格鲁 » 【VS Code】侧边栏美化

评论

  1. 欢迎加入 Typecho 大家族

    Typecho 2026-05-04    回复
  2. Тысячи фильмов и сериалов в HD-качестве без рекламы кино онлайн бесплатно

    Robintub 2026-05-04    回复