Sublime两个微信小程序代码高亮和自动提示插件snippet和Sublime-wxap

Sublime是深受广大程序员喜爱的代码编辑工具，它启动迅速，功能强大，有很多的插件扩展，今天我就来介绍两款 Sublime 的微信小程序代码高亮和代码提示的插件。

插件一：Sublime-snippet：

有大神写了专属微信小程序的 snippets ，把 WXML 里的组件和部分其他内容进行了整合，并分享出来方便大家使用,提升大家的开发效率。插件的名称是“Sublime-snippet”，可以实现 Sublime 编辑小程序 快速补全代码），不过该项目从2016年11月15日之后就没有在更新了。

插件的项目地址：点击访问

Sublime-snippet 的使用：

从上方提供的地址下载 Sublime-snippet ，将解压后的 weappSnippet 文件夹拷贝到 Sublime 的插件目录 \Packages 下，重启 Sublime。

快速打开 Sublime 的插件目录，点击菜单栏的 Preferences（首选项）==> Browse Packages （插件目录）

这样就能实现代码高亮和自动提示功能了。

注意：

将小程序的 wxml 文件类型设置为 html（才能有代码提示的功能）。设置文件类型可参考我的上一篇文章：Sublime 实现微信小程序开发时代码高亮

为了防止这个 snippet 的代码提示和其它的冲突，该 snippet 的作者设定以 w 开头触发代码提示，至于具体的规则，请看下载地址下的 readme 文件。

插件二Sublime-wxap：

简介：Sublime Text 3 微信小程序语法高亮、代码提示插件！

微信开发者工具的编辑器虽然自带代码提示功能，但是就其编码体验和主题选择，个人觉得还是不太好用。

而VS Code虽然有完善的小程序插件，而且挺好用，功能齐全，但是个人还是更偏向于简洁的Sublime Text。

所以还是想在自己熟悉的Sublime Text3上进行代码的编写工作，于是带着学习的目的，诞生了这款Sublime Text的微信小程序语法高亮、代码提示插件。

插件的项目地址：点击访问

安装：3种

1、Package Control

通过 Package Control：Install Package 搜索 Sublime wxapp 进行安装。

点击菜单栏 Preferences（首选项） ==> Package Control ，可能国内打开会比较慢。

在弹出的 Package Control 搜索框内输入 Install Package ，回车。

然后在弹出的 Install Package 搜索框内输入 Sublime wxapp 回车，进行自动安装，同样会很慢。如果等不及，可以使用下面的两种方法。

2、Git

用git克隆到Sublime的插件安装目录。

3、Zip

下载zip包，将其解压后的 Sublime-wxapp-master 文件夹拷贝到到 Sublime 的插件安装目录。

Windows的安装目录，可以从Sublime的菜单中依次选择：Preferences > Browse Packages 到达。

Mac的安装目录，可以从Sublime的菜单中依次选择：Sublime Text > Preferences > Browse Packages 到达。

插件的配置：

除此之外，还要简单的配置一下，从而提高wxml的补全效率，需要选择菜单 Preferences（首选项）==> Settings（设置），在打开的 Preferences.sublime-settings 用户配置文件中加入下面的代码：

"auto_complete_triggers":
[
	{
		"characters": "abcdefghijklmnopqrstuvwxyz< :.",
		"selector": "test.wxml"
	}
],

插件功能

1、wxml文件的语法高亮

除了基本的标签语法高亮外，还有以下两个特点：

1： 自动识别wxs标签，内部使用JavaScript语法高亮和代码提示。

2： Mustache语法等表示JS操作的属性值均高亮显示，用于区分其他常规属性值和文本内容。

2、wxss文件的语法高亮

目前是将其设置为css语法，rpx单位和内部组件标签无法高亮显示。

小程序的css不建议直接使用组件的标签选择器进行样式书写，建议统一采用class书写。

而rpx单位没有高亮显示，恰巧可以体现该单位的特殊性，因而不打算再单独编写针对wxss的语法文件。

这样也方便共用css原有的代码提示和补全。

3、微信内置组件的代码提示和自动补全

基本的标签补全和属性提示都已实现，具体功能点如下：

1： 标签的自动补全，并为常用标签添加辅助输入：view:if、view:for、view:class 等。

2: 通过 view.class 和 view#id 快速输入类名和id属性。

3: 标签属性以及属性值的自动提示和补全，将根据属性值的类型补全不一样的内容。

4: 标签属性支持冒号(:)匹配。

4、微信API的代码提示和自动补全

微信API的提示，统一通过 wx 前缀触发，输入期间不支持 . 匹配。

注意

wxml标签暂不支持自动闭合。

wxml标签和属性以及属性值的描述文本，受限于Sublime本身的Completion UI，暂时没有比较好的显示方式。

微信API的代码提示和自动补全还不是很全，但基本够用。

暂时没有提供 JSON 配置的提示功能。

暂时缺少文档快速查询便捷功能。

​