【微信小程序】我们来聊聊用vscode开发工具
【微信小程序】我们来聊聊用vscode开发工具
梦游人布拿拿关注
0.3122019.08.23 12:12:42字数 232阅读 3,812
早就听说vscode（Visual Studio Code）开发小程序很爽，没有原生的那种卡顿（莫名黑屏啥的）。
然后我也试了一下，然后打开项目后，我傻眼了。
vscode文件目录
黑人问号脸
层次结构也太不明显了吧，看的我难受。
不信你来看看微信小程序原生开发工具，至少看着比你这舒服啊。
小程序原生开发工具文件目录
然后就去找能不能有什么设置或者插件能解决这个问题。
功夫不负有心人，找到了vscode-icons这个插件。
步骤如下：
-
下载插件：
vscode-icons
-
打开文件图片主题设置：
打开文件图片主题设置
-
选择
vscode-icons设置使用vscode-icons
我们再来康康。
使用了vscode-icons文件图片主题的文件目录
哈哈哈。
开心
可以愉快的玩耍了。
接下来为了更好的使用vscode开发小程序，再推荐几个插件。
| 插件名称 | 简介 | 推荐指数 |
|---|---|---|
| minapp | 微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets） | 5星 |
| wechat-snippet | 微信小程序代码辅助,代码片段自动完成 | 5星 |
| wxml | 微信小程序wxml格式化以及高亮组件(高度自定义) | 5星 |
使用vscode提高小程序开发效率
不知道大家开发小程序是用什么工具，如果是微信自带的开发者工具，相信我，看了这篇文章，你会重新做出选择的。
之前一段时间，我也一直使用微信开发者工具进行小程序的开发与调试，但是用过的就会有这种体会：
代码编写区域太小，代码堆叠在一起，难以阅读
自定义能力较弱，只能修改代码字体
编辑器代码提示较少
工具经常出现莫名的bug，时不时黑屏
因此，为了解决这些个问题，果断更换开发工具，这里推荐大家使用号称“宇宙第一IDE”的编辑器——vscode。安装方法不作赘述，主要介绍一下几个vscode插件，在vscode中搜索插件关键字点击安装即可。
minapp
支持微信小程序标签、属性的智能补全，并且提示中包含文档内容（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）。
wechat-snippet
这个插件主要的功能就是代码辅助，代码片段自动完成，可以作为上个插件的补充。
wxml
这款插件用于将wxml代码进行高亮显示，并且提供代码格式化的功能，可将代码格式化为较易阅读的样式。
有了上面这几款插件，便可以开始高效地撸代码了。至于代码的调试以及效果的查看，当然还是得打开微信开发者工具。将编辑器隐藏，调试工具调到最大，快速找到元素的位置，修改样式，Ctrl+S，提交代码，一顿操作猛如虎。