submlime-snippet简介

在sublime来中，可以通过submlime-snippet来快速补全代码。 举个栗子，如果在sublime的存放submlime-snippet的文件夹下有如下的文件(elem-edge.sublime-snippet 文件名不重要)

<snippet>
    <tabTrigger>elem-edge</tabTrigger>
    <description>edge of the element</description>
    <content><![CDATA[
<!-- ${1:elem name} start -->
${2:content}
<!-- ${1:elem name} end -->
]]></content>
</snippet>

其中，

• <content><![CDATA[ ]]></content> 定义了补全的内容
• ${1:elem name} 中： 1是输入点的序号，1表示的是第一个输入点，elem name表示的是输入点的默认值。
• ${2:content} 中：2表示第二个输入点。
• <tabTrigger> ： 定义了触发补全的字符串
• <description> ：对snippet描述

打开任意一个文件，通过输入elem-edge，然后按Tab键，就可以补全内容。再按Tab进入下一个输入点。

上面的是snippet在任意类型的文件中都能触发。如果要限定文件类型，可以用 <scope>source.文件类型</scope>。

创建snippet的方式

1. 在菜单中打开 Tools-> New Snippet
2. 编辑内容
3. 保存

用sublime-snippet来快速做前端页面的方式

1. 制作一个组件演示页面
2. 打开sublime存放snippet文件夹。打开方式是：打开 Preferences>Browse Package，在打开的文件夹中，打开 User文件夹。即sublime存放snippet的文件夹。
3. 新建一个文件夹，名称为项目的名称。这样做是方便管理。应该没人一辈子只做一个项目吧~
4. 将一个个组件做成一个个的Snippet。为了保证和之前的Snippet的触发的按键不冲突，定义触发按键要加项目名称。例如,下面是一个通用的box

<snippet>
 <content><![CDATA[
<!-- ${1:box-name}-box start -->
<div class="box ${1:box-name}-box">
 <div class="box-header clearfix">
     <h3 class="box-title">${2:title}</h3>
     <div class="box-header-op">
         <a href="###">更多>></a>
     </div>
 </div>
 <div class="box-content">${3:content}</div>
</div>
<!-- ${1:box-name}-box end -->
${4:}
]]></content>
 <tabTrigger>项目名称:box</tabTrigger>
</snippet>

稍微复杂一点的，分页组件。

<snippet>
 <content><![CDATA[
<!-- 分页 start -->
<link rel="stylesheet" href="path-to-jquery.paging.css/jquery.paging.css">
<script src="path-to-jquery.paging.js/jquery.paging.js"></script>
<div class="paging-wrap ${1:paging-name}"></div>
/*var pager = \$('.${1:paging-name}').paging({
 pageNum: 10,
 onPageChange: function(pageAt) {
     console.log(pageAt);
 }
});*/
<!-- 分页 end -->
]]></content>
 <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 <tabTrigger>项目名称:paging</tabTrigger>
 <!-- Optional: Set a scope to limit where the snippet will trigger -->
 <!-- <scope>source.python</scope> -->
</snippet>

注意，补全内容如果要输出`# submlime-snippet简介

在sublime来中，可以通过submlime-snippet来快速补全代码。 举个栗子，如果在sublime的存放submlime-snippet的文件夹下有如下的文件(œJDj9toX6sr201505160122251786605067771431710545178œ 文件名不重要)

<snippet>
    <tabTrigger>elem-edge</tabTrigger>
    <description>edge of the element</description>
    <content><![CDATA[
<!-- ${1:elem name} start -->
${2:content}
<!-- ${1:elem name} end -->
]]></content>
</snippet>

其中，

• œVn0dCyySFG201505160122251786605419941431710545178œ 定义了补全的内容
• ${1:elem name} 中： 1是输入点的序号，1表示的是第一个输入点，elem name表示的是输入点的默认值。
• ${2:content} 中：2表示第二个输入点。
• œAxlmZtHTOe201505160122251786605710101431710545178œ ： 定义了触发补全的字符串
• œlUb8KCZkkS201505160122251786606069641431710545178œ ：对snippet描述

打开任意一个文件，通过输入œbJy2KCt5hS201505160122251786606367011431710545178œ，然后按Tab键，就可以补全内容。再按Tab进入下一个输入点。

上面的是snippet在任意类型的文件中都能触发。如果要限定文件类型，可以用 œyR2c9OkOZR201505160122251786606663831431710545178œ。

创建snippet的方式

1. 在菜单中打开 œpiPWmldjcd201505160122251786606972151431710545178œ
2. 编辑内容
3. 保存

用sublime-snippet来快速做前端页面的方式

1. 制作一个组件演示页面
2. 打开sublime存放snippet文件夹。打开方式是：打开 œy5VinOVls3201505160122251786607303851431710545178œ，在打开的文件夹中，打开 User文件夹。即sublime存放snippet的文件夹。
3. 新建一个文件夹，名称为项目的名称。这样做是方便管理。应该没人一辈子只做一个项目吧~
4. 将一个个组件做成一个个的Snippet。为了保证和之前的Snippet的触发的按键不冲突，定义触发按键要加项目名称。例如,下面是一个通用的box

<snippet>
 <content><![CDATA[
<!-- ${1:box-name}-box start -->
<div class="box ${1:box-name}-box">
 <div class="box-header clearfix">
     <h3 class="box-title">${2:title}</h3>
     <div class="box-header-op">
         <a href="###">更多>></a>
     </div>
 </div>
 <div class="box-content">${3:content}</div>
</div>
<!-- ${1:box-name}-box end -->
${4:}
]]></content>
 <tabTrigger>项目名称:box</tabTrigger>
</snippet>

稍微复杂一点的，分页组件。

<snippet>
 <content><![CDATA[
<!-- 分页 start -->
<link rel="stylesheet" href="path-to-jquery.paging.css/jquery.paging.css">
<script src="path-to-jquery.paging.js/jquery.paging.js"></script>
<div class="paging-wrap ${1:paging-name}"></div>
/*var pager = \$('.${1:paging-name}').paging({
 pageNum: 10,
 onPageChange: function(pageAt) {
     console.log(pageAt);
 }
});*/
<!-- 分页 end -->
]]></content>
 <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 <tabTrigger>项目名称:paging</tabTrigger>
 <!-- Optional: Set a scope to limit where the snippet will trigger -->
 <!-- <scope>source.python</scope> -->
</snippet>

的话，要用\进行转义。

然后，就可以进行飞速的编码啦~

推荐

最后，推荐几个，比较好用的sublime的自动补全插件

• Emmet 这个大家应该都知道
• Bootstrap 3 Snippets 快速生成bootstrap3的一些组件的Snippets