Snippets
Snippets就是代碼片段，是前端開發(fā)中節(jié)省時(shí)間另玖、提高效率困曙、減少出錯(cuò)的好東西。前端開發(fā)中谦去，最容易套路化的就是HTML代碼慷丽，若干個(gè)div、ul鳄哭、form要糊、tr、td妆丘、input等元素锄俄，組合起來局劲，配上對應(yīng)的CSS就組成了一個(gè)組件，這種組件如果是你自己敲出來就太傻比了奶赠，如果總是從手冊或者筆記里復(fù)制出來也效率低鱼填，所以，給你的編輯器裝一個(gè)Snippets的插件是很有必要的毅戈。其次需要代碼片段的是JS剔氏，最不需要代碼片段的是CSS。
Sublime text的Snippets插件
我用的編輯器是Sublime text竹祷，它有相當(dāng)多的Snippets插件，流行度前五名是：
Emmet Css Snippets：這個(gè)插件提供的片段說是片段羊苟，其實(shí)就是個(gè)聲明塑陵，比如mt:a就是margin-top: auto;，ffa是@font-face {}蜡励，th是text-height:令花，條目相當(dāng)多，記憶起來很費(fèi)勁凉倚，用起來倒不一定省時(shí)間兼都，還不如依賴編輯器的自動提示功能。
Bootstrap 3 Snippets：下文細(xì)說稽寒。
jQuery Snippets pack：jq的語法非常簡單扮碧，方法也不多，根本沒必要用片段杏糙，如果你一定要用慎王，你還要修改片段里的部分內(nèi)容，倒不如從一開始就敲出正確的片段宏侍。
CSS Snippets：跟Emmet Css Snippets相反赖淤，提供的條目很少，而且都很非主流谅河。
HTML Snippets：也是咱旱，提供的條目很少，而且都很非主流绷耍。它跟CSS Snippets都是網(wǎng)名叫joshnh的人寫的吐限，這么爛的插件之所以這么流行，完全就是因?yàn)椤@伙計(jì)搶注插件名字搶注得早褂始！給你個(gè)贊毯盈，大兄弟！
所以病袄，這五個(gè)插件搂赋，Emmet Css Snippets貌似很強(qiáng)大的樣子但是沒什么必要用赘阀，jQuery Snippets pack本身就沒必要用，CSS Snippets和HTML Snippets純屬玩鬧∧缘欤現(xiàn)在我們看看Bootstrap 3 Snippets基公。首先說Bootstrap 3確實(shí)需要片段插件，因?yàn)樗梢宰屇阒恍栎斎霂讉€(gè)字符就擴(kuò)展出一大片的片段宋欺，投入產(chǎn)出性價(jià)比最大轰豆，現(xiàn)在我們看看Bootstrap 3 Snippets是不是經(jīng)得起我們的期待。
安裝Bootstrap 3 Snippets
用Package Control插件就可以安裝齿诞，不多說酸休。
Bootstrap 3 Snippets手冊
手冊：https://github.com/JasonMortonNZ/bs3-sublime-plugin/
在手冊中可以查詢到全部縮寫代碼。
bs3-cdn
敲一個(gè)bs3祷杈，編輯器就已經(jīng)聯(lián)想出所有的命令斑司，我們試一試第一個(gè)bs3-cdn，按下tab鍵但汞，它擴(kuò)展出了：
<link rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="http://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>
夠完整宿刮，夠?qū)I(yè)！但是國外的CDN我們國內(nèi)用起來肯定不爽私蕾，可以替換成國內(nèi)的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
打印出基礎(chǔ)模板。
bs3-template:starter
打印出帶有導(dǎo)航的更豐富的基礎(chǔ)模板
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>
可以看到，插件并沒有打印表單組嗤疯，怎么辦冤今？比如現(xiàn)在我想打出：
<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>
怎么打呢？你以為你要挨個(gè)打出每一行么茂缚？那你就小看這個(gè)插件了戏罢。
試試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插件并不是完全對照手冊提供代碼片段，而是更科學(xué)更靈活的精簡代碼悔耘，作者絕對是用心整理過的讲岁。
其他就不再舉例了，背熟Bootstrap 3 Snippets插件的命令絕對是值得的，只要你堅(jiān)持用bs缓艳。
最后再推薦一個(gè)自動完成插件
Bootstrap3 Autocomplete
直接裝上即可校摩，一般是對類名進(jìn)行自動補(bǔ)全。
https://packagecontrol.io/packages/Bootstrap%203%20Autocomplete
