VS Code资源管理器底部空间扩展需求及根目录文件创建问题

云上老周

2026-7-13

VS Code资源管理器视图自定义设置方案

一、给资源管理器底部增加额外空间

VS Code没有原生设置项直接调整该空间，可通过自定义CSS实现：

安装VS Code插件 Custom CSS and JS Loader
在本地创建自定义CSS文件（比如vscode-custom.css），添加以下代码：

/* 调整数值可改变底部空间大小，示例为20px */
.explorer-viewlet .monaco-list {
    padding-bottom: 20px !important;
}

在VS Code设置中找到Custom CSS and JS Loader: Styles，填入你创建的CSS文件路径
重启VS Code生效

二、强制树形列表始终显示滚动条并保留底部固定空间

同样通过自定义CSS实现，在上述vscode-custom.css中添加以下代码：

/* 强制列表始终显示垂直滚动条 */
.explorer-viewlet .monaco-list-rows {
    overflow-y: scroll !important;
}

/* 给列表底部添加固定空间，示例为30px */
.explorer-viewlet .monaco-list {
    padding-bottom: 30px !important;
}

/* 可选：优化滚动条样式，减少视觉占用 */
.explorer-viewlet .monaco-list::-webkit-scrollbar {
    width: 8px;
}
.explorer-viewlet .monaco-list::-webkit-scrollbar-track {
    background: transparent;
}