使用 Sublime Text Snippets 快速編輯 Bootstrap 3 的 HTML 代碼

最近準備將手邊一個 Open Source 專案由 Bootstrap 2 升級為 Bootstrap 3，又開始陷入瘋狂的打字地獄。每天幾千行的 Coding 連續動作，已經接近 Typing 的速度。

Twiiter Bootstrap - http://getbootstrap.com/

但畢竟打字再快還是有極限，如果要讓 Coding 速度超越 Typing，就需要借助程式碼編輯器的神奇魔力。

最近迷上超好用的 Sublime Text 3，特別愛它的 Snippets 功能。

Sublime Text 3 - http://www.sublimetext.com/3

之前曾經介紹過 Sublime Text 的 Zen Coding 外掛功能，它確實讓 HTML 的輸入速度更快。

Sublime 安裝 Zen Coding 外掛

但是對於 Bootstrap 這種有自己專有結構定義的前端框架，需要更快的輸入方式；Sublime Text 很基本的 Snippets 功能反而更容易做到。

Working With Code Snippets In Sublime Text - http://www.hongkiat.com/blog/sublime-code-snippets/

自己建 Snippets 很簡單，但 Sublime Text 的強大之處，就是連自己建的動作都不必，只要利用強大的群眾外包力量。

以 Bootstrap 3 的 Snippets 來說，已經有開發者幫忙建好打包成 Package 分享。

先安裝 Sublime Package Control 外掛。

Package Control - https://sublime.wbond.net/installation

再利用 Package Control 安裝「Bootstrap 3 Snippets」套件。

A Sublime 2/3 plugin complete with Twitter Bootstrap 3 snippets

https://github.com/JasonMortonNZ/bs3-sublime-plugin

接下來就可以用簡單的代碼方式將 Snippets 貼到編輯區。

例如先輸入 bs3-alert 然後按下「TAB鍵」，就會自動貼上以下的 Bootstrap 3 HTML 代碼。

<div class="alert">

    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>

    <strong>Title!</strong> Alert body ...

</div>