Empty Editor Watermark:给 VS Code 空编辑器换一张背景图
关闭 VS Code 中所有文件后,编辑区域会显示默认 logo 和快捷键提示。我想把这块空白换成自己喜欢的图片,同时保留对提示文字的控制,于是做了 Empty Editor Watermark。
它处理的是空编辑器区域,打开代码文件后,代码编辑区仍按原来的方式显示。背景图片、透明度、显示方式,以及是否保留 logo 和快捷键提示,都可以在设置中调整。
能做什么
- 选择本地图片作为空编辑器背景,支持绝对路径、
~和file:///URI。 - 用
cover铺满区域,或用contain完整显示图片。 - 单独调整背景图片透明度,不改变整个窗口的透明度。
- 隐藏默认 logo 和快捷键提示,或调整它们的位置、大小与磨砂底效果。
- 检测 VS Code 更新后丢失或过期的注入,重新应用并提示重载。
扩展自带样式注入器,不需要另外安装 Custom CSS 扩展,也不用手动维护 CSS 导入路径。
安装和第一次使用
在 VS Code 扩展市场搜索 Empty Editor Watermark,或执行:
1 | code --install-extension YuHaoran251.empty-editor-watermark |
安装后,按提示确认应用水印。也可以打开命令面板,执行 Watermark: 选择背景图…,选好图片后按提示重载窗口。关闭所有编辑器标签页,就能看到背景。
首次应用需要确认允许修改 VS Code 安装目录。如果遇到 EPERM 或 EACCES,说明当前用户没有目标文件的写入权限,需要先解决安装目录权限问题再应用。
我常用的一组配置
下面这组配置只显示背景图,隐藏默认 logo 和快捷键提示。图片路径请换成自己的文件路径。
1 | { |
cover 会裁切超出区域的部分,适合铺满背景;如果更在意图片完整性,可以改成 contain,代价是周围可能留白。图片直接从原位置读取,移动或删除图片后需要重新选择并应用。
如果想保留快捷键提示,可以关闭 hideCommands,再通过 position、scale、panelWidth 和 panelFontSize 调整文字块。背景较复杂时,可以开启 frostedPanel。
实现方式与需要知道的限制
当前本地版本为 0.2.1。扩展会向 VS Code 安装目录中的 workbench.html(以及存在时的 workbench.esm.html)写入自己的 CSS 标记块,首次修改前会创建备份。重复应用会替换已有标记块,避免不断追加。
这也意味着它会触发 VS Code 的安装完整性告警。扩展提供 hideCorruptNotice 设置,通过 CSS 隐藏相关通知,并不修复校验结果,也不改变校验逻辑。该选项默认开启;上面的示例将它关闭,以便保留告警的可见性。开启隐藏后,其他原因引起的同类告警也可能被遮住。
修改设置后需要重载窗口。由于依赖工作台文件和界面结构,未来 VS Code 更新也可能需要适配;目前仅适用于可以写入安装目录的桌面版,不适用于 vscode.dev。
如何还原
先在命令面板执行 Watermark: 移除水印(还原 workbench.html),再卸载扩展。移除命令会删除本扩展的标记块,保留其他扩展的注入。
仅卸载扩展不会自动还原安装目录,所以建议按这个顺序操作。
项目地址
项目使用 MIT 许可证。功能和配置以仓库中的最新说明为准。