Sublime Text 之代码片段

所属：Tools

最近总被人问起，如何提高工作效率？
以前写 CSS 都是直接用 LESS 来弄的，根本就不用担心浏览器的前缀、CSS 选择器等问题，而现在这都是问题了，虽然说一直都有把 CSS 公用的东西抽离出来，打包成一个个组件，但是每次复制、粘贴、调整也还是有的麻烦的。
有天晚上跟龙哥去等车时，边走边无聊中说起来，发现他在琢磨这方面的东西，然后就简单的给我介绍起来，就是 Sublime Text Snippet 功能。其实以前也有简单用过来这个功能，感觉没有卵用处，那现在不防试试看吧。

创建 Snippet

打开 SublimeText 编辑器，找到菜单栏 Tools -> New Snippet...

会看到如下代码：

1
2
3
4
5
6
7
8
9
<snippet>
  <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <!-- <tabTrigger>hello</tabTrigger> -->
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <!-- <scope>source.python</scope> -->
</snippet>
  1. 注意下 <![CDATA[ ]] 中括号里面的内容，我们的代码片段要放在这个中括号里面
  2. ${1:this} 表示当代码插入后，鼠标会停留在这个位置，this 表示自定义参数，默认显示 this（可选）
  3. ${2:snippet} 表示当代码插入后，点击 tab 则会跳到当前这个位置（按顺序跳转），${3}、${4}等等同理可得，snippet 同上
  4. tabTrigger 是指自定义快捷键，比如：1-ocean，然后在 Sublime Text 编辑器，敲出 1-ocean 点击 tab键 就是显示出你刚定义好的代码片段
  5. scope 是指限定在某类文件名上生效
  6. 还可以自己加上 <description>这里是描述信息..</description>，当你敲出快捷键时会显示出相关提示

编写 Snippet Demo

这里先来编写个 HTML Snippet Demo

1
2
3
4
5
6
7
8
9
10
<snippet>
  <content><![CDATA[
<p class="${1:className}">${2:HTML Snippet Demo.}</p>
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>html-p</tabTrigger>
  <description>HTML - Snippet Demo</description>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>text.html</scope>
</snippet>

然后保存再 Packages\User 文件夹里面，命名为 xxx.sublime-snippet
然后打开一个 HTML 文件，输入 html-p，敲入 TAB 键，代码就会插入进来了。

参考资料