Emmet 是網路開發者 (尤其是前端人員) 必備的外掛套件之一。它可以節省你大幅度重複撰寫同樣或是類似程式碼的時間。另外搭配上 TabNine 來補足你在日常開發自行常打的文字、標籤，長期下來，你會覺得現代的工程師也可以工作的很聰明。
Emmet 安裝
如果你是 Visual Studio 的使用者，那麼當你安裝完成的那一刻，就已經是內建的一部分，你可以直接開始使用。若你是使用 Sublime, Atom … 等的使用者，你可以看官方網站統整的安裝說明頁面。
Emmet 線上試用
你可以進入像是 JSBin, Codepen 等平台，直接建立一個新專案，就可以直接體驗它的威力。(線上編譯器多半已經內建 Emmet 指令，不需另外設定)
Emmet 對於網路開發者的好處
以下列舉一些自己常用的操作習慣：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 產生 HTML5 的標準網頁範本 ! // 運用 Tab 自動產生成對/不成對標籤 a:link + Tab === <a href=''> p + Tab === <p></p> // 產生成對的 div，並搭配 class or id div.box*3 + Tab === <div class="box"></div><div class="box"></div><div class="box"></div> // 撰寫 CSS 常見的 flex 排版 df + Tab === display:flex jcc + Tab === justify-content:center |
你也可以運用 CSS 常用的 “>” 技巧，來產生 HTML 的巢狀結構。
Emmet 記不住？
你可以先試著用每個英文單字的第一個字母去猜猜看，多半有機會猜對，像是 mb === margin:bottom:”。當然，Emmet 也是有提供作弊碼(Cheat Sheet) 來讓你查詢的，詳請可以點這邊。
