使用 VS Code 编写小程序的姿势

官方的小程序开发工具使用起来非常难受, 尤其是长期使用 vim 插件的人, 使用任何 编辑器 或者 ide 必须先装 vim 插件, 所以总结一些使用 vscode 编写小程序可以提高效率的方法以及插件推荐.

 

插件推荐

minapp

minapp 这个插件能够实现微信小程序标签、属性的智能补全, 和语法高亮, 不过要使用 < 去激活.

wechat-snippet

wechat-snippet 能够提供了很多代码片段, 比如使用 wx-page 会初始化Page对象和对应生命周期函数. 它提供了在 wxml 中直接使用标签名生成标签, 在 json 配置文件中提示代码片段, 在 js 生成相关对象或函数的功能. 不过在 js 中要使用 wx- 前缀激活.

Auto Rename Tag

Auto Rename Tag 能够实现在修改标签时直接成对修改.

Path Autocomplete

Path Autocomplete 提供了自动完成路径的功能, 这对小程序中导入资源路径时十分方便.

Prettier - Code formatter

Prettier - Code formatter 用来格式化代码, 它默认的缩进是 2, 如果想调整为 4, 可以在 用户设置 中搜索 Prettier: Tab Width 进行设置.

保存自动编译

如果要实现保存自动编译, 首先要在小程序设置中找到 编辑 选项卡, 取消选中 修改文件时自动保存, 然后选中 保存时自动编译小程序. 小程序设置好后, 打开 vscode 设置, 搜索 Files: Auto Save 设置 onFocusChange 失去焦点自动保存. 之后在编写代码时, 手动保存 或者 自动保存 就会触发小程序开发工具的自动编译.

.