前言

[title-plane title=”前言”]本文介绍了 VScode + 微信小程序开发者工具 配置微信小程序开发环境的步骤,整理了官方以及优秀第三方的内容,对学习和工作有一定借鉴意义。[/title-plane]

配置过程

1. 安装 微信小程序开发者工具

  • 安装教程:根据自己的系统下载对应版本,然后一直点击下一步安装即可。
https://ae01.alicdn.com/kf/U1529cf685c1e44f89a1e51f3c6161ea2B.jpg

2. 安装 VsCode

https://ae01.alicdn.com/kf/U25cbe9a389414da7a74f5770231984ceU.jpg
https://ae01.alicdn.com/kf/U246d3645a79e4b72a3e7a59e3973d6e2F.jpg
[start-plane type=”1″]注意:一定要将 添加到PATH 这项打钩!!!/start-plane]

3. 安装开发必备插件

  • Easy less 支持使用less语法 ,因为微信小程序开发者工具不支持less ,所以要配合使用
https://ae01.alicdn.com/kf/Ucd11f114c0304fb3bb6e4d12fe1ded83b.jpg
  • 微信小程序开发者工具插件,开发必备
https://ae01.alicdn.com/kf/Uf8738eec3e254710a7b91a809e32a71dC.jpg

4. 配置Less插件

  • 快捷键command+逗号打开用户设置,搜 less.complie
  • 点击编辑添加到右边,设置commpress是否开启压缩,sourceMap是否生成.map文件。配置如下图
"less.compile": {
        
        "outExt": ".wxss"
    },
"[less]": {

"editor.suggest.insertMode": "replace"
}

完成

至此,配置已经全部完成,开始快乐的开发你的小程序吧!!!