分享一个DuiLib VSCode UI预览插件

本插件能够在VSCode上预览DuiLib的XML文件，这样用VSCode编写UI就很方便了

我公司的Windows客户端UI是基于DuiLib的，平时在写UI的过程中，经常需要频繁打开客户端来看查看样式，对我来说就很不方便。我一般用VSCode来写XML，某一天前端同事分享了一个他自己开发的VSCode插件，我就在想，能不能在VSCode上也能够实时预览DuiLib的UI呢。于是我写了一个简单的插件，来实时显示DuiLib UI效果

本插件使用的DuiLib版本基于DuiLib_Ultimate开源项目

插件地址：点我去下载，或者VSCode插件市场搜索：DuiLib UI Preview

本插件已开源，地址：点我去star⭐，觉得好用的朋友，帮忙star一下

使用方法

• 用VSCode打开DuiLib XML文件所在的根目录
• 在XML文件上点击右键，选择DuiLib Preview即可

核心功能如下

• 预览XML文件
  

• 修改XML文件实时生效

• 多语言预览(请将多语言xml放到language目录下)
  

• 可预览按钮的不同状态

实现原理

• 根据VSCode提供的API，监控用户选择文件或者用户修改了文件
• 以上行为发生后，VSCode会发送命令给插件，此时插件读取文本内容并将内容传递给XMLToPng.exe命令
• XMLToPng命令是我基于DuiLib写的一个小程序，通过接受标准输入的XML，将XML转换成DuiLib窗口，获取窗口根节点，对根节点设置位置等信息，然后直接调用根节点的渲染操作，将渲染结果转换成base64格式的PNG图片并输出到标准输出上
• VSCode插件读取XMLToPng的标准输出，将结果格式化成HTML并打开VSCode WebView即可

感谢大家，欢迎体验使用，觉得好用的，麻烦给插件一个好评，github帮忙star一下~~~