w3h5

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两个微信小程序代码高亮和自动提示插件snippet和Sublime-wxap 小程序 第1张

快速打开 Sublime 的插件目录,点击菜单栏的 Preferences(首选项)==> Browse Packages (插件目录)

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

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

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

注意:

将小程序的 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 ,可能国内打开会比较慢

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

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

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

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

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

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"
	}
],

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

插件功能

1、wxml文件的语法高亮

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

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

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

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

2、wxss文件的语法高亮

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

注意

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

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

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

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

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


赞 (1)
分享到: +More |

评论 板凳

换个身份

  1. #1
    智宇
    不爱用这个编辑器
    智宇 7个月前 (09-17)回复 取消评论