前言
擅用我们的开发工具、提高我们的开发效率,始终是一名程序员的追求。
本文介绍有关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 回复