使用 Sublime-snippet 来快速做前端页面

Sublime-snippet 简介

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

  elem-edge
  edge of the element
  
${2:content}

]]>

其中，

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

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

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

创建 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

  

    

        
${2:title}
        

            更多>>
        
    
    
${3:content}


${4:}
]]>
  项目名称:box

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

  



/*var pager = \$('.${1:paging-name}').paging({
    pageNum: 10,
    onPageChange: function(pageAt) {
        console.log(pageAt);
    }
});*/

]]>
  
  项目名称:paging
  
  

注意，补全内容如果要输出$的话，要用\进行转义。

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

推荐

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

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

---

本文遵守创作共享CC BY-NC-SA 4.0协议
网络平台如需转载必须与本人联系确认。