Mac - Sublime Text 2 安裝、使用 Emmet ( Install Emmet in Sublime Text 2 )

Sublime Text 2 本身已經很優秀了，但最重要的是搭配其他工具套件會提升開發者的速度，尤其是 Emmet 是網頁開發者的利器，本篇將介紹如何安裝與使用 Emmet。( 其他 Mac 相關教學可以參考本篇整理 )

安裝 Emmet：

本次將透過 Package Control 進行安裝，按下 Command + Shift + P 打開指令列，輸入 Install Package 如下圖：

等待 Package Control 讀取完後，輸入 Emmet 如下圖：

選擇第一個 Plugin 項目等待自動安裝完後，就可以開始使用 Emmet。

---

使用 Emmet：

Emmet 提供你快速編寫 Web 程式，它會根據你的檔案附檔名提供不同的語法，例如在一個空白的 .html 檔案中輸入 html:5 再按下 Tab 鍵就會自動產生一個 HTML5 架構的內容，參考如下圖：

再舉另一個範例，若要要產生 <div id="bg"></div>，只需要在文件中輸入 div#bg 再按下

 Tab 鍵就可以自動生成該內容，參考下圖：

當然 HTML Tag 種類那麼多而且又有巢狀結構，針對此問題 Emmet 都有支援，詳細請參考 Emmet Cheat Sheet。如此一來透過簡潔的寫法就可以立即產生所需要的內容，實在是替開發者節省許多時間、精力。其他 Sublime Text 2 相關文章可以參考這裡。