关于Snippets和Bootstrap 3 Snippets插件

Snippets

Snippets就是代码片段，是前端开发中节省时间、提高效率、减少出错的好东西。前端开发中，最容易套路化的就是HTML代码，若干个div、ul、form、tr、td、input等元素，组合起来，配上对应的CSS就组成了一个组件，这种组件如果是你自己敲出来就太傻比了，如果总是从手册或者笔记里复制出来也效率低，所以，给你的编辑器装一个Snippets的插件是很有必要的。其次需要代码片段的是JS，最不需要代码片段的是CSS。

Sublime text的Snippets插件

我用的编辑器是Sublime text，它有相当多的Snippets插件，流行度前五名是：

Emmet Css Snippets：这个插件提供的片段说是片段，其实就是个声明，比如mt:a就是margin-top: auto;，ffa是@font-face {}，th是text-height:，条目相当多，记忆起来很费劲，用起来倒不一定省时间，还不如依赖编辑器的自动提示功能。

Bootstrap 3 Snippets：下文细说。

jQuery Snippets pack：jq的语法非常简单，方法也不多，根本没必要用片段，如果你一定要用，你还要修改片段里的部分内容，倒不如从一开始就敲出正确的片段。

CSS Snippets：跟Emmet Css Snippets相反，提供的条目很少，而且都很非主流。

HTML Snippets：也是，提供的条目很少，而且都很非主流。它跟CSS Snippets都是网名叫joshnh的人写的，这么烂的插件之所以这么流行，完全就是因为——这伙计抢注插件名字抢注得早！给你个赞，大兄弟！

所以，这五个插件，Emmet Css Snippets貌似很强大的样子但是没什么必要用，jQuery Snippets pack本身就没必要用，CSS Snippets和HTML Snippets纯属玩闹。现在我们看看Bootstrap 3 Snippets。首先说Bootstrap 3确实需要片段插件，因为它可以让你只需输入几个字符就扩展出一大片的片段，投入产出性价比最大，现在我们看看Bootstrap 3 Snippets是不是经得起我们的期待。

安装Bootstrap 3 Snippets

用Package Control插件就可以安装，不多说。

Bootstrap 3 Snippets手册

手册：https://github.com/JasonMortonNZ/bs3-sublime-plugin/

在手册中可以查询到全部缩写代码。

bs3-cdn

敲一个bs3，编辑器就已经联想出所有的命令，我们试一试第一个bs3-cdn，按下tab键，它扩展出了：

够完整，够专业！但是国外的CDN我们国内用起来肯定不爽，可以替换成国内的CDN，或者是重编译的文件路径。

bs3-local

引用本地路径的简写也有：bs3-local，再试试：

靠谱。

bs3-template:html5

打印出基础模板。

bs3-template:starter

打印出带有导航的更丰富的基础模板

bs3-form、bs3-form:inline、bs3-form:horizontal

试试bs3-form:horizontal：

        

            
Form title
        

        

        

            

                Submit
            
        

然后我们对比一下bs3手册里的form片段：

  

    Email
    

      
    
  
  

    Password
    

      
    
  
  

    

      

        
           Remember me
        
      
    
  
  

    

      Sign in
    
  

可以看到，插件并没有打印表单组，怎么办？比如现在我想打出：

  

    Email
    

      
    
  

怎么打呢？你以为你要挨个打出每一行么？那你就小看这个插件了。

试试bs3-input:email:h吧：

    :
    

        
    

直接就出来了，靠谱吧？

所以，Bootstrap 3 Snippets插件并不是完全对照手册提供代码片段，而是更科学更灵活的精简代码，作者绝对是用心整理过的。

其他就不再举例了，背熟Bootstrap 3 Snippets插件的命令绝对是值得的，只要你坚持用bs。

最后再推荐一个自动完成插件

Bootstrap3 Autocomplete

直接装上即可，一般是对类名进行自动补全。

https://packagecontrol.io/packages/Bootstrap%203%20Autocomplete