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

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

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

前端开发技术栈（插件篇）：400+常用前端开发插件总结清单（持续更新......）
常用前端开发插件总结清单,日常前端开发的时候,尤其在使用一些常用的功能的时候,例如:表单,,动画效果,时间选择,文件上传,下拉框等功能.直接用插件可以让自己节省更多的开发时间,更多的去关心业务,自己封 ...
Html css是前端吗,HTML5 CSS3 Web前端开发
HTML5 CSS3 Web前端开发语音编辑锁定讨论上传视频 <HTML5+CSS3 Web前端开发>是2018年5月清华大学出版社出版的图书,作者是唐四薪[1] . 书中的图片 ...
Web前端html5+css3前端开发入门学习笔记
文章目录前言 HTML 认识HTML 1. 网页组成和本质 2.了解浏览器 3.web标准 4.HTML感知 5.HTML骨架 6.编译软件vscode的简介和使用 7.注释 8.标签组成和关系 9 ...
前端开发神器Hype3初体验-可视化、响应式、动效
背景之所以接触到这个开发工具,还是因为项目需要,我本来是做Android开发的,后来因为公司前端开发人员不够,然后开始做手机端网页开发,接触了Vue,后来前端开发离职,我只好又接手Web开发,本身对 ...
【前端开发】Vue + Fabric.js + Element-plus 实现简易的H5可视化图片编辑器
目录前言一 .实战效果技术选型核心功能代码实现二.Fabric.js 简介安装创建画布监听画布事件鼠标事件监听设置画布背景设置背景颜色向画布添加图层对象获取当前选中的对象 ...
前端最好用的编译器_web前端开发用什么编辑工具好？
首先来给你说说前端开发常用的开发工具基础人员编辑工具:Editplus,text 中级编辑工具:sublime,HBulider 高级编辑工具:websorm,VSCode 工欲善其事,必先利其器. ...
Web前端开发神器：WebStorm 2019 for mac
WebStorm 2019 for mac是JetBrains公司旗下一款很好用的JavaScript开发工具.,支持自动代码完成,动态代码分析,重构支持以及VCS集成,功能强大,被誉为最智能的Jav ...
webstorm github怎么用_前端开发神器WebStorm发布最新版本2019.3，代码完成更加智能...
WebStorm是一款深受广大程序员喜爱的JavaScript 开发和Web前端开发工具,完美适应各种复杂客户端开发和Node.js的服务器端开发.2019.3版本的启动速度提高了20%,对Vue.j ...
webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器
#webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器 -- 工欲善其事必先利其器##各工具介绍 `webstorm`是**JetBrains** ...
IntelliJ IDEA 使用 LiveEdit 插件实现实时可视化前端开发
IntelliJ IDEA 使用 LiveEdit 插件实现实时可视化前端开发之前因为公司很多都是C#后台项目,所以一直用的Visual Studio开发.而在VS里会自带实时刷新功能,即:在IDE ...

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

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

最新文章

热门文章