[TOC] # 使用 Sublime-snippet 来快速做前端页面 来自：http://www.jianshu.com/p/219de00c8343 ## Sublime-snippet 简介 在 Sublime 中，可以通过 Sublime-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>。 ## 创建 Submlime-snippet 的方式 1. 在菜单中打开 Tools-> New Snippet 2. 编辑内容 3. 保存 ## 用 Submlime-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> ``` >注意，补全内容如果要输出$的话，要用``进行转义。 然后，就可以进行飞速的编码啦~ ## 推荐 最后，推荐几个，比较好用的 Sublime 的自动补全插件 * Emmet 这个大家应该都知道 * Bootstrap 3 Snippets 快速生成bootstrap3的一些组件的 Snippets。