前端开发可视化编辑神器mxDev又更新了

       Vscode可视化开发插件mxDev又更新了，这次是带来的0.2.2版。在vscode插件市场搜索mxDev并下载安装

这一版带来的新功能如下：

一 . 代码树视图

       代码树视图现在看起来还不能做什么，在未来将是很多功能的基础，比如：代码树根部的自定义style,多层组件（比如table）的编辑，甚至是实现JSX的编辑

二. 属性编辑

     对象，数组和方法类型的属性终于可以编辑了

1. 在属性编辑上点击要修改的属性值
2. 如果是复杂类型，框架会使用vscode编辑器来编辑
3. 在vscode编辑器进行编辑，保存。保存后vscode编辑器将自动关闭，并将修改后的值自动同步到可视化编辑器的属性值，在相应属性名称上会出现一个*，表示这个属性已修改但未保存。
4. 点击属性编辑右侧的“保存“图标，让修改生效，并刷新到视图

三.  设置主编辑区的分辨率

     如下图可见，设置主编辑区的分辨率

四. 还有很多程序上的改进

      这些改进与业务功能无关，属于插件开发中的技术架构改进。

1. 主编辑区独立为一个iframe，与外面的编辑器进行css隔离和技术框架隔离
2. 可视化编辑器和vscode插件端抛弃传统的vscode webview通信方式，采取websocket方式通信。在webview内嵌套iframe的结构下，传统的通信方式在vscode webview下会带来无法解决的“跨域”问题。而websocket方式明显更加灵活而且扩展性更好。
3. 还有很多程序架构上的演进。如果说0.1版还是在探索可视化工具在vscode上的可行性，0.2版就是实实在在向着可视化设计编码工具演进的一版。

        从这些改进上，都能看出作者的野心勃勃和诚意满满，相信在0.3或是0.4版的时候，会带来一个基本可用而且好用的可视化工具。

        除了从插件市场下载安装外，还可以从github上clone整个项目，然后再自己打包安装。

        Github地址：https://github.com/jonenine/mxDev