Empty Editor Watermark给空编辑器(那个显示 VS logo 与快捷键提示的"水印"区域)铺一张自定义背景图,并可选择隐藏 logo 与快捷键提示——自带注入器,不需要
它做什么
为什么必须写
|
| 命令 | 作用 |
|---|---|
Watermark: 应用/更新水印 |
写入/刷新注入(底图块 + 通知隐藏块) |
Watermark: 移除水印(还原 workbench.html) |
关闭总开关,并删除本扩展的注入;重启后不会自动恢复 |
Watermark: 选择背景图… |
选图 → 写入 imagePath → 立即应用 |
Watermark: 查看生成的水印 CSS |
把当前会生成的全部 CSS(含通知隐藏规则)开成只读文档,便于核对/排查 |
诊断与写入保护
命令面板执行 Watermark: 一键诊断,可查看目标文件位置、文件和目录的写权限、背景图可读性、备份及注入状态,以及磁盘内容是否符合当前配置。诊断只读取文件;图片解码和当前窗口是否已重载仍需实际确认。
应用和移除前会检查 HTML 与注入标记,遇到残缺或重复标记会停止。修改先写入同目录临时文件,刷盘并校验后再替换目标;替换前失败会保留原文件并清理临时文件。此流程需要安装目录的写权限,不支持符号链接或硬链接目标。多个目标文件独立处理,部分成功时会列出成功和失败的文件,不会自动重载。
设置
| 设置项 | 默认 | 说明 |
|---|---|---|
emptyEditorWatermark.enabled |
true |
总开关;关闭会移除已写入的样式 |
emptyEditorWatermark.hideCorruptNotice |
true |
隐藏「安装似乎损坏」通知(见上一节) |
emptyEditorWatermark.imagePath |
"" |
背景图绝对路径;留空用扩展自带的自制默认图 |
emptyEditorWatermark.imageFit |
cover |
cover 铺满裁切 / contain 完整留白 |
emptyEditorWatermark.opacity |
0.9 |
图片透明度,只作用于图片 |
emptyEditorWatermark.position |
top-right |
水印文字块位置(隐藏 logo+命令时无视觉影响) |
emptyEditorWatermark.scale |
0.48 |
文字块缩放 |
emptyEditorWatermark.hideLogo |
true |
隐藏 VS logo |
emptyEditorWatermark.hideCommands |
true |
隐藏快捷键提示列表 |
emptyEditorWatermark.panelWidth |
261 |
文字块宽度(px) |
emptyEditorWatermark.panelFontSize |
19 |
文字块基准字号(px) |
emptyEditorWatermark.frostedPanel |
false |
给文字块加半透明磨砂底 |
从 be5invis.vscode-custom-css 迁移
你可以在两者共存的情况下平滑切换(本扩展的注入在文档顺序上更靠后,同特异性下生效):
- 装本扩展 → 首次提示选 应用水印 → 重载窗口,确认效果与之前一致(底图、隐藏 logo/命令、透明度)
- 确认无误后,从
settings.json的vscode_custom_css.imports里删掉指向welcome.css的那一行(动画那行updateHandler.js想留着就留着) - 命令面板 →
Disable Custom CSS and JS(extension.uninstallCustomCSS)移除 be5invis 的注入,或执行Reload Custom CSS and JS只刷新 - 重载窗口。此时安装目录里只剩本扩展的注入
⚠️ 顺序别反:先让本扩展生效、确认效果,再去掉 be5invis 那一路。中途如果两边都不生效,
workbench.html.bak-empty-editor-watermark和 be5invis 的.bak-custom-css都还在,可以手动还原。
卸载 / 还原
- 想干净还原:先执行
Watermark: 移除水印,再卸载扩展 - 忘记执行就卸载了:把
workbench.html.bak-empty-editor-watermark覆盖回workbench.html(注意这份备份是首次注入前的原样,若期间 be5invis 又注入过,用它覆盖会把那边一起清掉 —— 更稳的做法是手动删掉EMPTY-EDITOR-WATERMARK与EMPTY-EDITOR-WATERMARK-NOTICE两组标记之间的内容) - 卸载扩展不会自动改回安装目录(改安装目录属于显式动作,交给用户决定)
已知限制
- 改设置后要重载窗口才生效:样式是内联写进
workbench.html的,没法不重载热更(同类扩展的通病) - 通知隐藏靠文案/DOM 匹配,VS Code 改版后可能失效(见上文「已知边界」)
- 窄窗口(≤900px)时文字块自动退回居中,避免压到别的内容
- 图片是就地读取的:移动/删除原图后需要重新应用(会退回扩展自带默认图并提示)
- 只支持桌面版 VS Code(需要能写安装目录);Web / vscode.dev 不适用
版本沿革(为什么 0.2.0 又退回 0.1.x 的实现)
| 版本 | 实现 | 备注 |
|---|---|---|
| 0.1.0 | 注入 <style> 铺空编辑器底图 |
会触发 VS Code 的「安装似乎损坏」通知 |
| 0.2.0 | 改为独立 Webview 页(不碰安装目录) | 提示不再出现,但形态从"空编辑器里的底图"变成"一个标签页",观感变了 |
| 0.2.1 | 回到注入实现(空编辑器底图),并新增隐藏「安装似乎损坏」通知的纯 CSS | 观感与 0.1.x 一致;用 0.2.0 的用户升级即可回到原形态 |
开发
npm install
npm run compile # 编译到 out/
npm run watch # 增量编译
npm run check # compile + 两套自检
npm run package # 生成 .vsix
调试:用 VS Code 打开本目录按 F5 起扩展开发宿主;或直接把工程目录做成扩展目录的 junction 联调:
cmd /c mklink /J "%USERPROFILE%\.vscode\extensions\yuhaoran251.empty-editor-watermark" "<你的工程目录>"
两套自检(
npm run check会依次跑):
tools/check-injector.js—— 纯函数单测:URL 转换、底图 CSS 生成、patchHtml幂等、stripBlock只删自己、往返回原, 以及通知隐藏:15 种文案都在、:is()/:has()折叠成一条规则、纯 CSS 无脚本、applyBlocks开关某一块时字节稳定tools/check-apply.js—— 端到端冒烟:stub 掉vscode后真跑一遍activate()/ 各命令,目标是一个临时 appRoot 里的 workbench.html 副本, 断言两段注入的位置、备份、幂等、设置更新(含hideCorruptNotice开关)、移除后逐字节还原、目标缺失不崩。绝不碰真实安装目录改注入逻辑或写文件逻辑后请先跑
npm run check。
许可
MIT。media/default-bg.svg(默认底图)与 media/icon.png 均为本扩展作者自制,随 MIT 一并授权。
发布流程(不依赖 Azure 学生订阅)
GitHub Actions 自动检查并打包,版本标签须与 package.json 一致。下载运行产物 marketplace-vsix,在 Marketplace 管理页执行 Update 上传;标签不再自动上架。也可本地运行 node tools/prepare-release.cjs。无需 Azure 订阅、PAT 或 Bitwarden。详细步骤见 发布说明。