巧用sublime text设置snippets(代码片段)

原创 WALL-E 教程 sublime 121阅读 11 天前 举报

前言

擅用我们的开发工具、提高我们的开发效率,始终是一名程序员的追求。

本文介绍有关sublime text编辑器的一个小技巧,关于Snippets(代码片段)的设置与使用。

话不多说先看需求。

需求

作为一名前端开发,先从日常开发中最简单最熟悉的需求入手。

日常开发调试代码时常要用到console.log(''),看起来console.log没有几个字符,输入起来也算方便,但是频繁的输入总觉得还是长了点

怎么才能像打个响指一样console.log就消失...,不是,就出现了呢?

声明

这个需求本身是有瑕疵的,常用的方法调用,sublime text 可以借助插件实现代码自动补全。

这里为了引入下面的snippet,先假设没有代码自动补全这回事。

我们来看看没有自动补全,snippet能为我们做什么?

我先把结果公布,当我输入了简写的log,然后点击tab键,log自动替换为console.log

创建

看到了效果,我们反过来推导过程

在菜单栏选择Tools | Developer | New Snippet,可以创建一个snippet模板文件

模板内容如下,实际上是一个XML文件

tabTrigger

先看模板中注释内容,使用tabtrigger标签定义触发短语

例如我们的触发短语定义为log,所以添加如下标签

description

description标签内可以定义说明,定义的内容会在下拉选项的右侧出现

content

content标签的内定义替换的模板,模板需要包裹在如下代码块中

所以我们把模板补充完整

这么看模板的意思很明显了,通过自定义短语可以触发代码片段替换,替换为自定义模板内容

保存

试着保存文件试试,默认保存路径是Sublime Text 3\Packages\User

存储文件名自定义,后缀名必须是.sublime-snippet

例如我们存储为log.sublime-snippet

首次尝试

输入log,点击tab,替换为console.log,似乎完美,却感觉少了点啥

具体少了啥,先看看我们接下来会怎么操作,输出console.log()后,我们需要移动鼠标光标到()内,然后填入我们需要输出的内容

终于发现了是光标的位置不对,内容替换后光标默认位于模板的末端。能不能让光标更智能一点,去到我们想去的地方?

设置光标

snippet提供了设置光标位置的方法,在content模板中,使用$1、$2、$3...标记光标出现位置

例如我们想console.log输出后光标位于()内,我们需要使用$1指示位置

标记不仅可以指定光标位置,也可以设置默认值

总结

官方文档对于snippet的定义是智能模板,我觉得通俗点更像是自定义模板,通过自定义短语触发,有点像代码补全,区别在于自定义。

有了自定义,我们可以更智能一些,写一些自己需要的模板。

console.log的例子虽小,其实映射的就是日常开发中可能要频繁使用的方法等,手动输入太慢,可以尝试用snippet的方式写成短语。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复