使用vscode开发微信小程序

提升微信小程序的开发效率

前言：

近期开始学习微信小程序，用了自带的开发者工具，泪目~
一天的使用下来感觉以下：

• 一个编译器由模拟器 +调试器+调试器 三者组成， 代码便写区域过小强迫症患者难以忍受！！！
• 代码提示少的可怜，一切代码靠手打…
• 代码没有相对应的高亮，阅读难度大
• 微信开发者工具出现莫名的卡顿，常常重启让人十分懊恼
• 等等等~~~~~~

原始的界面工具

因此在这像各位安利一款编辑工具 ： Visual Studio Code (vscode)

首先了解小程序的构成

• js
• json
• wxml
• wxss

这边不难看出来wxml 映射html ，wxss映射css

因此只要安装相对应的插件，便可以使得代码像书写html 代码同样驾轻就熟 （狗头滑稽.jpg）

废话很少说，上截图演示 上插件 =-=
小程序助手

• 让vscode 提供对 .wxss .wxml 文件后缀的支持
  
  minapp插件
• 支持微信小程序的语法高亮
• 增长wxml,wxss代码提示
  
  vscode wxml
• 提供微信小程序代码的提示
• 对wxml文件进行格式化
  
  wechat-snippet

装完上述插件以后，就能够在vscode内，像开发Vue项目 react 项目同样开发微信小程序

在微信开发者工具进行调试 ，在vscode 里面编码 ，两者并不冲突（vscode里边保存的代码，微信开发者工具会自动编译） ，此时此刻 语法高亮 代码提示 格式化 均获得实现，简直不要太爽~~~~