1. 写在前面

1.1 微信开发者工具现状

具备一些基本的通用IDE功能，但是第三方的支持扩展需要加强。

1.2 开发者工具自带的编辑器扩展功能

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

（图一）

2. 几个不错插件安装效果

2.1 标签高亮插件-vincaslt.highlight-matching-tag

功能：可以把当前行对应的标签开头和结尾高亮起来，让开发者一目了然

2.2 小程序开发助手插件-overtrue.miniapp-helper

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

2.3 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 格式化

3. DIY添加适合自己的插件

3.1 添加插件功能简介

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

3.2 插件添加具体步骤

3.2.1 安装插件，获取插件文件

安装vsCode并安装你需要移植的插件，必须要说的是vsCode的插件非常多，好的插件也很多。相关安装，搜索插件教程建议大家百度相关教程。或者直接下载vsCode亲自体验，插件安装过程还是非常简单的。

3.2.2 复制插件文件夹

找到vsCode相关插件的安装文件夹：
操作系统 安装路径
windows %USERPROFILE%.vscode\extensions
macOS ~/.vscode/extensions
Linux ~/.vscode/extensions
复制对应插件文件夹到微信开发者工具的「打开编辑器扩展目录」（图一标注为1的地方）

3.2.3 添加插件配置文件

新版开发者工具直接进入图形设置，扩展设置里勾选对应插件即可。如下图：

旧版操作方法：进入微信开发者工具的「管理编辑器扩展」功能页面，在尾端加入对应添加的插件名称。以以上3个介绍的插件为例，在原来的尾端加入：
“vincaslt.highlight-matching-tag”,
“overtrue.miniapp-helper”,
“qiu8310.minapp-vscode”

3.2.4 见证奇迹

重启微信开发者工具，见证插件带来的编码便利吧！

4 需要注意的

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