Emmet 的前身叫做:Zen Coding,也許熟知舊名的人不在少數(shù)。Emmet 一般前端工程師用得比較多,具體它是做什么的,我們通過(guò)下面兩張 Gif 演示圖來(lái)說(shuō)明:
http://wiki.jikexueyuan.com/project/intellij-idea-tutorial/images/xix-a-emmet-introduce-1.gif" alt="Emmet 的介紹" />
http://wiki.jikexueyuan.com/project/intellij-idea-tutorial/images/xix-a-emmet-introduce-2.gif" alt="Emmet 的介紹" />
- IntelliJ IDEA 自帶 Emmet 功能,使用的快捷鍵是
Tab
。
Emmet 資料介紹:
- Emmet 官網(wǎng):http://emmet.io
- Emmet 官網(wǎng)文檔:http://docs.emmet.io/
- Emmet 速查表:http://docs.emmet.io/cheat-sheet/
- Emmet 項(xiàng)目主頁(yè):https://github.com/emmetio/emmet
http://wiki.jikexueyuan.com/project/intellij-idea-tutorial/images/xix-b-emmet-settings-1.jpg" alt="Emmet 的設(shè)置" />
- 如上圖標(biāo)注 1 所示,IntelliJ IDEA 支持主流四個(gè)瀏覽器內(nèi)核的一些特別 CSS 書寫。
- 如上圖標(biāo)注 2 所示,可以增加或是刪除某些屬性。
- 具體使用,如下圖 Gif 演示。
http://wiki.jikexueyuan.com/project/intellij-idea-tutorial/images/xix-b-emmet-settings-2.gif" alt="Emmet 的設(shè)置" />
http://wiki.jikexueyuan.com/project/intellij-idea-tutorial/images/xix-b-emmet-settings-3.jpg" alt="Emmet 的設(shè)置" />
- 如上圖標(biāo)注紅圈所示,在
Live Templates
中也有預(yù)設(shè)三套代碼模板。