坏蛋格鲁坏蛋格鲁

【IDE】VS Code 侧边栏资源管理器文字大小与行号设置

1. 修改 js 主文件

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

  1. 修改 js 文件C:\Users\Administrator\AppData\Local\Programs\Microsoft VS Code\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 的三目判断 s.templateId==="file"?32:这里的 32 便是修改的行高高度

2. 修改 css 文件

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

  1. 修改 css 文件C:\Users\Administrator\AppData\Local\Programs\Microsoft VS Code\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;
}
本原创文章未经允许不得转载 | 当前页面:坏蛋格鲁 » 【IDE】VS Code 侧边栏资源管理器文字大小与行号设置

评论