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键，它扩展出了：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="//code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
够完整，够专业！但是国外的CDN我们国内用起来肯定不爽，可以替换成国内的CDN，或者是重编译的文件路径。
bs3-local
引用本地路径的简写也有：bs3-local，再试试：
<!-- Local bootstrap CSS & JS -->
<link rel="stylesheet" media="screen" href="bootstrap.min.css">
<script src="jquery.js"></script>
<script src="bootstrap.min.js"></script>
靠谱。
bs3-template:html5
打印出基础模板。
bs3-template:starter
打印出带有导航的更丰富的基础模板
bs3-form、bs3-form:inline、bs3-form:horizontal
试试bs3-form:horizontal：
<form action="" method="POST" class="form-horizontal" role="form">
<div class="form-group">
<legend>Form title</legend>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
然后我们对比一下bs3手册里的form片段：
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
可以看到，插件并没有打印表单组，怎么办？比如现在我想打出：
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
怎么打呢？你以为你要挨个打出每一行么？那你就小看这个插件了。
试试bs3-input:email:h吧：
<div class="form-group">
<label for="input" class="col-sm-2 control-label">:</label>
<div class="col-sm-10">
<input type="email" name="" id="input" class="form-control" value="" required="required" title="">
</div>
</div>
直接就出来了，靠谱吧？
所以，Bootstrap 3 Snippets插件并不是完全对照手册提供代码片段，而是更科学更灵活的精简代码，作者绝对是用心整理过的。
其他就不再举例了，背熟Bootstrap 3 Snippets插件的命令绝对是值得的，只要你坚持用bs。
最后再推荐一个自动完成插件
Bootstrap3 Autocomplete
直接装上即可，一般是对类名进行自动补全。
https://packagecontrol.io/packages/Bootstrap%203%20Autocomplete
