[筆記] Emmet 網路開發必備簡碼 加速你的開發流程

章節連結

Emmet 是網路開發者 (尤其是前端人員) 必備的外掛套件之一。它可以節省你大幅度重複撰寫同樣或是類似程式碼的時間。另外搭配上 TabNine 來補足你在日常開發自行常打的文字、標籤,長期下來,你會覺得現代的工程師也可以工作的很聰明。
git javascript


Emmet 安裝

如果你是 Visual Studio 的使用者,那麼當你安裝完成的那一刻,就已經是內建的一部分,你可以直接開始使用。若你是使用 Sublime, Atom … 等的使用者,你可以看官方網站統整的安裝說明頁面

Emmet 線上試用

你可以進入像是 JSBin, Codepen 等平台,直接建立一個新專案,就可以直接體驗它的威力。(線上編譯器多半已經內建 Emmet 指令,不需另外設定)

Emmet 對於網路開發者的好處

以下列舉一些自己常用的操作習慣:

你也可以運用 CSS 常用的 “>” 技巧,來產生 HTML 的巢狀結構。


Emmet 記不住?

你可以先試著用每個英文單字的第一個字母去猜猜看,多半有機會猜對,像是 mb === margin:bottom:”。當然,Emmet 也是有提供作弊碼(Cheat Sheet) 來讓你查詢的,詳請可以點這邊

coding emmet

按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:24