Vscode 可视化开发插件 mxDev 又更新了,这次是带来的 0.2.2 版。在 vscode 插件市场搜寻 mxDev 并下载安装
这一版带来的新性能如下:
一 . 代码树视图
代码树视图当初看起来还不能做什么,在将来将是很多性能的根底,比方:代码树根部的自定义 style, 多层组件(比方 table)的编辑,甚至是实现 JSX 的编辑
二. 属性编辑
对象,数组和办法类型的属性终于能够编辑了
- 在属性编辑上点击要批改的属性值
- 如果是简单类型,框架会应用 vscode 编辑器来编辑
- 在 vscode 编辑器进行编辑,保留。保留后 vscode 编辑器将主动敞开,并将批改后的值主动同步到可视化编辑器的属性值,在相应属性名称上会呈现一个 *,示意这个属性已批改但未保留。
- 点击属性编辑右侧的“保留“图标,让批改失效,并刷新到视图
三. 设置主编辑区的分辨率
如下图可见,设置主编辑区的分辨率
四. 还有很多程序上的改良
这些改良与业务性能无关,属于插件开发中的技术架构改良。
(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