VSCode 在编写代码方面比微信小程序更加方便,也更加符合大家的开发习惯,咱们在开发小程序时可以结合这两款工具,我们编写代码使用 VSCode,预览、调试、发布等使用小程序开发者工具。
在 VSCode 中无法原生支持 .wxml 文件的语法高亮及提示。
1.需要安装的插件: WXML - Language Service
![](https://i-blog.csdnimg.cn/blog_migrate/12f98ccaa69553834266cfe645398e7b.png)
代码提示的插件(使用时 wx- 'API' ): 小程序开发助手
![](https://i-blog.csdnimg.cn/blog_migrate/c120bdb8eba076ebe13f6d2ae4754f25.png)
2.配置插件:settings.json
![](https://i-blog.csdnimg.cn/blog_migrate/630b2ce37a544e786cca34ec868afb9a.png)
// 小程序格式化
"minapp-vscode.wxmlFormatter": "prettier", // 指定格式化工具
"minapp-vscode.prettier": { // prettier 更多参考 https://prettier.io/docs/en/options.html
"useTabs": false,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": false
},
"[wxml]": {
"editor.defaultFormatter": "qiu8310.minapp-vscode"
}
3.完全使用小程序开发者工具是没有问题的,只是结合 VSCode 编写代码会更方便一些。当然VS code并不支持预览,我们还需借助 小程序开发者工具的 【模拟器和调试器】
![](https://i-blog.csdnimg.cn/blog_migrate/0cf00d1d398a7bb69cd3b500e9b3e994.png)
注意:开发中须打开项目本身文件夹,不可打开嵌套文件夹,否则会出现如下错误
![](https://i-blog.csdnimg.cn/blog_migrate/75f39fb59bb0d3a64c7d76b224dd0b1a.png)