前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Sublime两个微信小程序代码高亮和自动提示插件snippet和Sublime-wxap

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

作者头像
德顺
发布2019-11-13 17:15:02
2K0
发布2019-11-13 17:15:02
举报
文章被收录于专栏:前端资源

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 用户配置文件中加入下面的代码:

代码语言:javascript
复制
"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 配置的提示功能。

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-09-12),如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档