前言

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

本文介绍有关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的方式写成短语。