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 配置的提示功能。
暂时缺少文档快速查询便捷功能。
未经允许不得转载:前端资源网 - w3h5 » Sublime两个微信小程序代码高亮和自动提示插件snippet和Sublime-wxap