1. 前言 1.1 微信开发者工具现状

具有一些基本的通用IDE功能，但第三方支持扩展有待加强。

1.2 开发者工具提供的编辑器扩展功能

可能很多小伙伴都没有用过微信官方开发者工具的编辑器扩展（我一般叫它编辑器插件），官方把这个功能隐藏的很深，也没有相关文档，但是保留了相关入口。合理使用第三方编辑器插件可以大大提高开发效率，我们来看看官方保留的编辑器插件入口：

（图1）

2. 几个不错的插件安装效果 2.1 标签高亮插件-.--tag

功能：可以高亮显示当前行对应的标签的开始和结束，方便开发者一目了然

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

功能：必须说，这是一款纯国产的插件，里面的代码片段很全，具体介绍一下：小程序开发助手-

2.3 插件-.-

功能：这个就是今日之星插件，它有强大的跳转功能，可以CMD+点击wxml中对应的变量/方法及CSS样式名，就可以直接跳转到对应的js/wxss文件，以下是官方的介绍：

标签名称及属性自动补全根据组件已有的属性，自动选择对应支持的属性集。属性值自动补全点击模板文件中的函数或属性，可以跳转到js/ts定义处（仅纯wxml或pug文件支持，vue文件不完全支持）样式名称自动补全（仅纯wxml或pug文件支持，vue文件不完全支持）vue模板文件中自动补全，同时还支持pug语言支持链接支持（仅纯wxml或pug文件支持，vue文件不支持）自定义组件自动补全（仅纯wxml文件支持，vue或pug文件不支持）模板文件中js变量高亮显示（仅纯wxml或pug文件支持，vue文件不支持）内置对wxml格式的支持3.DIY适合自己的添加插件3.1添加插件功能介绍

认真研究过微信开发者工具的朋友可能知道或者了解，微信开发者工具编辑器其实和微软开源编辑器有着“密不可分”的关系。进一步研究发现，插件可以无缝移植到微信开发者工具编辑器中，所以今天的内容就是将插件移植到微信开发者工具中。我们先来看一下微信开发者工具自带的“管理编辑器扩展”功能（图1中标记为2的地方）

（图二）

3.2 添加插件的具体步骤 3.2.1 安装插件并获取插件文件

安装安装好需要迁移的插件。不得不说插件还是挺多的，也有很多不错的插件。相关安装建议大家在百度上搜索插件教程。或者直接下载自己体验也可以。插件安装过程还是很简单的。

3.2.2 复制插件文件夹

找到相关插件的安装文件夹：

操作系统安装路径

%%\

~/./

~/./

将对应插件文件夹复制到微信开发者工具的“打开编辑器扩展目录”下（图1中标记为1）

3.2.3 添加插件配置文件

新版开发者工具直接进入图形设置，然后在扩展设置中选择对应的插件。如下图：

旧版使用方法：进入微信开发者工具的“管理编辑器扩展”功能页，在末尾添加对应的插件名称即可。以上面三个插件为例，在原来的末尾添加以下内容：

“。 - 标签”，

“.-”

“。——”

3.2.4 见证奇迹

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

4 注意事项

插件有很多，与小程序相关的也越来越多，但是插件的质量参差不齐，所以建议安装的时候选择星级较高的插件。