Windows：放大 VS Code Explorer 字体、行高和图标

目标效果：**字体 20px、行高 36px、图标 22px**。直接修改本机安装文件，不需要编译。

> 本文的 JS 替换片段适用于 VS Code 1.141.0、Commit 为 `2a59476c9bfcb90b3ddc372c36762471b7dfad1c` 的构建。其他版本如果找不到完整片段，请不要替换其他相似代码。

## 第一步：安装插件

在 VS Code 扩展中搜索 **Custom CSS and JS Loader**，安装发布者为 **be5invis** 的插件。

## 第二步：保存 CSS 文件

创建文件夹 `C:\VSCodeStyles`，在里面新建 `explorer.css`，粘贴以下内容并保存。

确保文件名是 `explorer.css`，不是 `explorer.css.txt`。

```css
/* 文件名：20px；行高：36px */
.monaco-workbench .explorer-folders-view .explorer-item {
font-size: 20px !important;
height: 36px !important;
line-height: 36px !important;
}

/* 重命名输入框 */
.monaco-workbench .explorer-folders-view .explorer-item .monaco-inputbox {
height: 36px !important;
font-size: 20px !important;
}

.monaco-workbench .explorer-folders-view .explorer-item .monaco-inputbox > .ibwrapper > .input {
height: 34px !important;
font-size: 20px !important;
}

/* 文件和文件夹图标：22px */
.monaco-workbench .explorer-folders-view .explorer-item.monaco-icon-label::before {
height: 36px !important;
width: 22px !important;
background-size: 22px !important;
background-position: left center !important;
font-size: 22px !important;
padding-right: 8px !important;
}
```

## 第三步：配置插件

在 VS Code 中按 `Ctrl+Shift+P`，执行 **Preferences: Open User Settings (JSON)**。

在最外层的 `{ }` 中加入：

```json
"vscode_custom_css.imports": [
"file:///C:/VSCodeStyles/explorer.css"
]
```

注意与前后配置项之间用逗号分隔。如果已有 `vscode_custom_css.imports`，只把文件地址追加到原数组，不要重复添加配置项。

保存设置，暂时不要启用插件。

## 第四步：找到 VS Code 安装文件

右键 VS Code 快捷方式，选择 **属性**，查看“目标”中的 `Code.exe` 路径；也可以点击 **打开文件所在的位置**。

常见安装目录：

```text
用户安装：%LOCALAPPDATA%\Programs\Microsoft VS Code
系统安装：C:\Program Files\Microsoft VS Code
便携版本：Code.exe 所在文件夹
```

在安装目录中找到：

```text
resources\app\out\vs\workbench\workbench.desktop.main.js
```

如果安装目录下没有 `resources`，打开版本或 Commit 子文件夹再找。例如本文对应构建可能位于 `2a59476c9b` 子文件夹中。

**先复制一份 `workbench.desktop.main.js` 作为备份，保存到其他目录。**

## 第五步：修改真实行高

完全退出所有 VS Code 窗口，用支持大文件的其他文本编辑器（例如 Notepad++）打开刚才找到的 `workbench.desktop.main.js`。

查找以下完整片段：

```js
FDt=class s{static{this.ITEM_HEIGHT=22}getHeight(o){return s.ITEM_HEIGHT}getTemplateId(o){return aie.ID}}
```

确认只找到一处，将它替换为：

```js
FDt=class s{static{this.ITEM_HEIGHT=36}getHeight(o){return s.ITEM_HEIGHT}getTemplateId(o){return aie.ID}}
```

实际只改了 `ITEM_HEIGHT=22` → `ITEM_HEIGHT=36`。保存文件，保持原来的编码。

**不要全局替换所有 `22` 或 `ITEM_HEIGHT`。** 如果找不到完整片段，先停止：版本不同、文件选错或已经修改过，都可能造成不匹配。

如果文件位于 `Program Files` 且保存时提示无权限，关闭编辑器，以管理员身份重新打开编辑器后再修改。

## 第六步：加载样式并重启

重新打开 VS Code，按 `Ctrl+Shift+P`，执行：

```text
Enable Custom CSS and JS
```

按插件提示完成重启；必要时完全退出所有 VS Code 窗口，再重新打开。

完成后，Explorer 应显示 **20px 字体、36px 行高、22px 图标**。检查滚动、点击文件和重命名是否正常。

## 以后怎么调整

| 修改目标 | 修改位置 |
| --- | --- |
| 字体 | `explorer.css` 中三处 `font-size: 20px` |
| 图标 | 最后一个 CSS 规则中的 `width`、`background-size`、`font-size`，当前为 22px |
| 行高 | JS 中 Explorer 的 `ITEM_HEIGHT` 和 CSS 中所有 36px，要同步修改；输入框的 34px 也相应调整 |

修改 CSS 后，执行 **Reload Custom CSS and JS**，再重启 VS Code。

## 遇到问题

- **字体和图标没变化：** 检查 CSS 文件地址、文件后缀，然后执行 **Reload Custom CSS and JS** 并重启。
- **行重叠或点击错位：** 确认 JS 的行高与 CSS 一致，且修改的是当前安装版本的文件。
- **想恢复：** 执行 **Disable Custom CSS and JS**，退出 VS Code，将同版本 JS 备份复制回原位置。停用插件不会自动恢复 JS 行高；如果插件还加载了其他样式，只移除本教程的 CSS 导入项并重新加载即可。
- **升级 VS Code：** 升级可能覆盖修改。先停用本教程的 CSS，再重新确认新版的 JS 片段，不能直接套用旧版片段或用旧版备份覆盖新版。
- **出现安装完整性提示：** 插件和 JS 修改都会改变安装文件，因此可能触发该提示。