BundlerMinifier编辑器装饰解析：如何自动给生成文件打上水印与图标标记

BundlerMinifier编辑器装饰解析：如何自动给生成文件打上水印与图标标记

【免费下载链接】BundlerMinifier Visual Studio extension 项目地址: https://gitcode.com/gh_mirrors/bu/BundlerMinifier

BundlerMinifier 是一款 Visual Studio 扩展，用于把 JS、CSS、HTML 文件打包（Bundle）并压缩（Minify）。它有一个贴心的细节：打开自动生成的产物文件时，编辑器右下角会自动浮现一枚半透明的 Generated 水印；打开配置文件 bundleconfig.json 时则显示一枚项目图标水印。本文带你读懂这套"编辑器装饰（Adornment）"机制——水印如何被判定、如何交互，以及如何一键开关。

两种编辑器装饰：图标水印 vs 生成水印

BundlerMinifier 在编辑器里一共放了两种视觉标记，全部位于视口右下角，不遮挡代码内容：

"Generated" 文案与悬浮提示 "Click to toggle visibility" 来自资源文件 Text.resx，方便本地化。

判断逻辑集中在装饰提供器 AdornmentProvider.cs：

• 文件名是 bundleconfig.json → 挂图标水印；
• 文件路径是绝对路径（排除虚拟文件）→ 读取所在项目的 bundleconfig.json，遍历所有 bundle，若该文件的规范化路径（去掉 .min 与 .map 后缀后）等于某个 bundle 的 outputFileName，则挂 "Generated" 水印；
• 只有"输入=输出"的单文件直通配置且本身不是 min/map 文件时，会被跳过，避免误标。

水印如何渲染：自定义 Adornment 图层

Visual Studio 编辑器允许插件在文本视口上叠加"装饰层"。BundlerMinifier 定义了名为 JSON Logo 的专属图层，声明在 AdornmentLayer.cs，并通过 MEF 导出，保证装饰绘制在光标层之前。

"Generated" 水印的实现很直白，见 GeneratedAdornment.cs：

• 一个 TextBlock，75 号字体、加粗、灰色，初始透明度约 0.3；
• 通过监听视口宽高变化，把水印钉在右下角（ViewportRight - 380、ViewportBottom - 100）；
• 鼠标悬停时透明度变为 1，移开后恢复半透明——这就是"水印高亮"效果。

图标水印 LogoAdornment.cs 则是加载扩展安装目录下的 Resources\icon.png，同样悬停高亮。

水印交互教程：点击一键开关，偏好自动保存

👉 点击水印即可切换显示/隐藏，无需进入任何设置菜单。

• 点击事件触发 LogoAdornment.OnVisibilityChanged(...)，通过静态事件同步通知所有装饰实例切换透明度（0 或初始值）；
• 切换状态会立即写入用户级设置存储，键名为 ShowWatermark（见 AdornmentProvider.cs），下次打开 Visual Studio 依然生效；
• 默认值为 true，即开箱即显示水印。

这套"所见即所点"的设计让新手零学习成本：想关就点一下，想开再点一下。

相关功能：抑制输出文件生成

水印的存在前提是扩展真的在生成输出文件。如果你改用 Gulp 或自研服务端代码来消费 bundleconfig.json，可以在其右键菜单的 Bundler & Minifier → Produce Output Files 上取消勾选，扩展将停止监听与生成，但配置文件与 Visual Studio 工具链仍保留可用：

更多打包、压缩与构建集成的用法可参考 README.md 中的 Features 与 bundleconfig.json 配置示例。

水印源码文件导航

小结

BundlerMinifier 的编辑器装饰用极轻量的方式解决了"别手改自动生成文件"的经典坑：图标水印标识别名配置文件，"Generated" 水印标记产物文件，悬停高亮、点击开关、偏好持久化，三步交互全部内置。理解 Adornments 目录 这四个类，也是学习 Visual Studio 扩展中 Adornment 机制的优秀范例。✨

【免费下载链接】BundlerMinifier Visual Studio extension 项目地址: https://gitcode.com/gh_mirrors/bu/BundlerMinifier