Vscode可视化开发插件mxDev又更新了,这次是带来的0.2.2版。在vscode插件市场搜索mxDev并下载安装
这一版带来的新功能如下:
一 . 代码树视图
代码树视图现在看起来还不能做什么,在未来将是很多功能的基础,比如:代码树根部的自定义style,多层组件(比如table)的编辑,甚至是实现JSX的编辑
二. 属性编辑
对象,数组和方法类型的属性终于可以编辑了
- 在属性编辑上点击要修改的属性值
- 如果是复杂类型,框架会使用vscode编辑器来编辑
- 在vscode编辑器进行编辑,保存。保存后vscode编辑器将自动关闭,并将修改后的值自动同步到可视化编辑器的属性值,在相应属性名称上会出现一个*,表示这个属性已修改但未保存。
- 点击属性编辑右侧的“保存“图标,让修改生效,并刷新到视图
三. 设置主编辑区的分辨率
如下图可见,设置主编辑区的分辨率
四. 还有很多程序上的改进
这些改进与业务功能无关,属于插件开发中的技术架构改进。
- 主编辑区独立为一个iframe,与外面的编辑器进行css隔离和技术框架隔离
- 可视化编辑器和vscode插件端抛弃传统的vscode webview通信方式,采取websocket方式通信。在webview内嵌套iframe的结构下,传统的通信方式在vscode webview下会带来无法解决的“跨域”问题。而websocket方式明显更加灵活而且扩展性更好。
- 还有很多程序架构上的演进。如果说0.1版还是在探索可视化工具在vscode上的可行性,0.2版就是实实在在向着可视化设计编码工具演进的一版。
从这些改进上,都能看出作者的野心勃勃和诚意满满,相信在0.3或是0.4版的时候,会带来一个基本可用而且好用的可视化工具。
除了从插件市场下载安装外,还可以从github上clone整个项目,然后再自己打包安装。
Github地址:https://github.com/jonenine/mxDev