我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

最近苏南大叔的文章,都是在使用vscode调试electron-vue项目。当调试到.vue文件的时候,可能就需要个高亮方案了。否则,整个代码解密看上去,不是那么美观了。本文描述的是:vscode.vue文件代码的高亮方案。

苏南大叔:vscode 调试 vue 项目,代码高亮方案 vetur - vscode-vue
vscode 调试 vue 项目,代码高亮方案 vetur(图4-1)

本文测试环境:mac/vscode@1.30.1/vetur@0.14.5

方案描述

.vue文件在vscode中的代码高亮方案,其实是非常简单的。安装个插件就可以了,插件的名字就叫做vetur。截至到发稿,vetur的最新版本是0.14.5。可以直接在vscode的插件管理里面搜索,也可以直接打开一个.vue文件,右小角会有相关的安装提示出现。vetur的安装方式,非常简单,看图说话即可。

苏南大叔:vscode 调试 vue 项目,代码高亮方案 vetur - vue-color-1
vscode 调试 vue 项目,代码高亮方案 vetur(图4-2)

苏南大叔:vscode 调试 vue 项目,代码高亮方案 vetur - vue-color-2
vscode 调试 vue 项目,代码高亮方案 vetur(图4-3)

效果图

下面的是vetur安装完毕后,.vue文件在vscode中的高亮效果图:

苏南大叔:vscode 调试 vue 项目,代码高亮方案 vetur - vue-color-3
vscode 调试 vue 项目,代码高亮方案 vetur(图4-4)

总结

vscode对于electron-vue的调试过程来说,还是非常友好的。推荐大家使用vscode调试electron-vue项目。

更多vscode的使用技巧,欢迎查看苏南大叔的相关文章。

助理微信

微信打赏码

微信公众号

微信小程序

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   vue    vscode