最近苏南大叔的文章，都是在使用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的使用技巧，欢迎查看苏南大叔的相关文章。

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可，规模化镜像抄袭本站内容的行为，将会根据有关法律法规进行维权。
《程序如此灵动~》下所有原创文章，如被用于商业用途，请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件，请点此获取

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

本站的忠实读者小伙伴，正在阅读下面这些文章：