sublime text 之snippet功能的使用

　　sublime text 小巧而功能强大，有着好看的外观，被誉为世界上最“性感”的IDE。sublime text也是本小白在最近的学习和做项目当中最常使用的IDE。小巧且功能强大，对于开发前端以及小型项目来说绰绰有余。

　　但对于诸多功能，本白也是通过网上的一些大神笔记以及官网上的一些功能才了解并使用到的。最近习得的功能中，其中一个叫snippet的小功能让人觉得很有意思。于是乎，本白决定以此文记录一下使用的过程，以便不时之需。

　　以下进入正文：

• 安装sass snippet插件 （支持该功能的插件，sublime 2和3都可以使用该功能）

1. windows下 按ctrl+shift+p 打开sublime的命令行，输入 ‘pci’（package control：install package的缩写）
2. 稍等片刻后，待sublime连接网络弹出搜索框。接着搜索sass snippet 并点击安装。

• 查看snippet功能是否可用

1. 新建一个html文件，按ctrl+shift+p 后输入snippet，看是否有相应的snippet字段。如果有，则表示snippet可正常使用。

• 查看对应文件的scope

1. snippet功能通过键入关键词后按tab完成代码不全，但是很多时候我们针对不同文件类型，并不需要其他文件中使用的代码，所以需要查看某些文件对应的scope
2. 打开要编辑snippet代码块指定补全的代码类型或者通过命令行（ctrl+shift+p）键入‘ssphp’（set syntax:php 设置文件类型为php）。接着按ctrl+shift+alt+p，在编辑器下方就会显示对应的scope。比如php文件和html文件对应的scope是‘text.html’，而css和js则是source.css和source.js。

• 新建snippet并编辑snippet

1. 点击上方选项来中的 Tools >小片段（汉化后，英文版应该就直接是snippet）
2. 点击后，sublime会直接新建一个文件，内容如下：

<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> -->                                                           <!--使用时注释去掉，将中间的词换成按tab触发补全的关键词-->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->                                                          <!--设置在什么文件类型下触发补全，填写上文获得的scope-->
</snippet>　

 

　　3.补全内容中，$符号表示的是代码不全后光标出现的位置和顺序。比如${1:this}：意为光标在此第一次出现，默认值为this，且该默认值被选中。如果有多个$1，则光标同　　时出现在此处，而默认值只按照第一个设置的值出现。下面定义了${2:snippet}，所以，当修改了$1后，按tab，则直接跳转到$2的位置。另外，如果需要显示$符号，则需　　要在符号前面加‘\’转义。

　　4.如果触发关键词和sublime text中自带的代码补全关键词有冲突的话，可能会造成该snippet无效。

• snippet的保存

1. 编辑完的snippet需要使用sublime text规定的后缀：    .sublime-snippet。
2. 代码保存到sublime text安装路径下的：Data > Packages > User 目录下即可。
3. 建议在User 目录下新建一个snippet目录专门保存snippet的代码块。（不影响功能）。

• snippet的使用

1. 编辑完后，打开新建一个该snippet对应文件类型的文件后，键入关键字并按tab即可完成代码的补全
2. css的代码块补全前，需要在关键字前加'.'或者'#'然后再按tab。（此处略坑。所以在编辑snippet的时候，可以在代码块前加个$1,补全后可以直接把符号删除。）

 

• 测试

如果所编辑的snippet无效，可以使用下面snippet测试一下，本白亲测：

<snippet>
    <content><![CDATA[
<?php
/**
*以下代码用于${1:index}输出
*
*详解
* @author      rex<rex.sp.li@aliyun.com>
* @version     1.0
* @since       2015
*/
//声明编码
header('content-type:text/html;charset=utf-8');
//设置时区
date_default_timezone_set('PRC');

$2




?>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>pb</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html</scope>
</snippet>

　　上述snippet在html和php中都同样有效。如果该snippet无法正常发挥作用，先ctrl+shift+p 搜索是否安装了sass snippet。接着查看snippet的后缀是否正确。总的来　　说，该功能还是比较简单好用的。能出问题的地方也不多。

　　然后，就开始你的第一段snippet的编写吧。