写在前面

可能很多老铁没用过官方的微信开发者工具的编辑器扩展（我一般称为编辑器插件）。官方把这块功能也隐藏得很深，也没有相关文档介绍，但是预留了相关的入口。合理利用第三方编辑器插件，可以极大的提升开发效率。下面先来看看官方预留的编辑器插件入口：

（图一）

几个不错插件安装效果

上图：标签高亮插件-vincaslt.highlight-matching-tag
功能：可以把当前行对应的标签开头和结尾高亮起来，让开发者一目了然

上图：小程序开发助手插件-overtrue.miniapp-helper
功能：必须要说的这个是纯国产的插件，里面的代码片段功能很全，具体介绍：小程序开发助手 - Visual Studio Marketplace
https://marketplace.visualstudio.com/items?itemName=overtrue.miniapp-helper

上图：minapp插件-qiu8310.minapp-vscode
功能：这个是今天的明星插件，里面的跳转功能很强，可以在wxml里CMD+点击对应变量/方法和CSS样式名称直接跳转到对应的js/wxss文件对应的地方。具体的下面是官方介绍：

1. 标签名与属性自动补全
2. 根据组件已有的属性，自动筛选出对应支持的属性集合
3. 属性值自动补全
4. 点击模板文件中的函数或属性跳转到 js/ts 定义的地方（纯 wxml 或 pug 文件才支持，vue 文件不完全支持）
5. 样式名自动补全（纯 wxml 或 pug 文件才支持，vue 文件不完全支持）
6. 在 vue 模板文件中也能自动补全，同时支持 pug 语言
7. 支持 link（纯 wxml 或 pug 文件才支持，vue 文件不支持）
8. 自定义组件自动补全（纯 wxml 文件才支持，vue 或 pug 文件不支持）
9. 模板文件中 js 变量高亮（纯 wxml 或 pug 文件才支持，vue 文件不支持）
10. 内置 snippets
11. 支持 emmet 写法
12. wxml 格式化

DIY添加适合自己的插件

仔细研究过微信开发者工具的人可能知道或者了解，其实微信开发者工具编辑器跟微软的开源编辑器vsCode「颇有渊源」。再深入研究发现，vsCode的插件完全可以无缝移植到微信开发者工具编辑器里来，所以今天的内容就是移植vsCode的插件到微信开发者工具。咱们先看看微信开发者工具自带的「管理编辑器扩展」功能（图1标注为2的地方）
（图二）
所以，移植vsCode的插件到微信开发者工具编辑器通常分为如下几步：

1. 安装vsCode并安装你需要移植的插件，必须要说的是vsCode的插件非常多，好的插件也很多。相关安装，搜索插件教程建议大家百度相关教程。或者直接下载vsCode亲自体验，插件安装过程还是非常简单的。
2. 找到vsCode相关插件的安装文件夹：
   操作系统 安装路径
   windows %USERPROFILE%.vscode\extensions
   macOS ~/.vscode/extensions
   Linux ~/.vscode/extensions
3. 复制对应插件文件夹到微信开发者工具的「打开编辑器扩展目录」（图一标注为1的地方）
4. 进入微信开发者工具的「管理编辑器扩展」功能页面，在尾端加入对应添加的插件名称。以以上3个介绍的插件为例，在原来的尾端加入：
   “vincaslt.highlight-matching-tag”,
   “overtrue.miniapp-helper”,
   “qiu8310.minapp-vscode”
5. 重启微信开发者工具，见证插件带来的编码便利吧！

需要注意的

vsCode的插件很多，小程序相关的也越来越多了，但是插件质量参差不齐，所以安装时建议选择「标星」star比较多的插件。