是一個支援眾多程式編輯器的外掛，它可以讓你不需要再死記HTML或CSS關鍵字，減少不必要的coding錯誤，加速整個網頁開發的工作流程，大多數的編輯器都有相對應的 Emmet(Zen Coding) 套件可以安裝，Emmet 基本的用法就跟我們在寫 CSS 的概念是一樣的。
設定 Emmet
- 輸入設定值以啟用 Emmet
Emmet使用方法及常用語法
- E 代表HTML標籤。
- E#id 代表id屬性。
- E.class 代表class屬性。
- E[attr=foo] 代表某一個特定屬性。
- E{foo} 代表標籤包含的內容是foo。
- E>N 代表N是E的子元素。
- E+N 代表N是E的同級元素。
- E^N 代表N是E的上級元素。
Html子元素
使用”>”為代表符號
同一層多一個Html tag 元素
使用”+”為代表符號
多次重複使用表單
使用”*”為代表符號
加入CSS的ID
使用”#”為代表符號
加入CSS的CLASS
使用”.”為代表符號
加入編號
使用”$”為代表符號
加入內容
使用”{}”為代表符號
參考資料
https://dev.to/raaynaldo/speed-up-code-your-html-using-emmet-in-vscode-nesting-operators-201o
https://blog.greenroots.info/10-vs-code-emmet-tips-to-make-you-more-productive
https://pjchender.blogspot.com/2016/07/emmet.html