Emmet的前身是大名鼎鼎的Zen coding，如果你從事Web前端開發的話，對該插件一定不會陌生。它使用仿CSS選擇器的語法來生成代碼，大大提高了HTML/CSS代碼編寫的速度，比如下面的演示：
去年年底，該插件已經改名為Emmet。但Emmet不只改名，還帶來了一些新特性。本文就來直觀地演示給你。
一、快速編寫HTML代碼
1. 初始化
HTML文檔需要包含一些固定的標簽，比如<html>、<head>、<body>等，現在你只需要1秒鐘就可以輸入這些標簽。比如輸入“!”或“html:5”，然後按Tab鍵：
2. 輕松添加類、id、文本和屬性
連續輸入元素名稱和ID，Emmet會自動為你補全，比如輸入p#foo：
連續輸入類和id，比如p.bar#foo，會自動生成：
<p class="bar" id="foo"></p>
下面來看看如何定義HTML元素的內容和屬性。你可以通過輸入h1{foo}和a[href=#]，就可以自動生成如下代碼：
<h1>foo</h1>
<a href="#"></a>
3. 嵌套
現在你只需要1行代碼就可以實現標簽的嵌套。
效果如下圖所示：
4. 分組
你可以通過嵌套和括號來快速生成一些代碼塊，比如輸入(.foo>h1)+(.bar>h2)，會自動生成如下代碼：
<div class="foo">
<h1></h1>
</div>
<div class="bar">
<h2></h2>
</div>
5. 隱式標簽
聲明一個帶類的標簽，只需輸入div.item，就會生成<div class="item"></div>。
在過去版本中，可以省略掉div，即輸入.item即可生成<div class="item"></div>。現在如果只輸入.item，則Emmet會根據父標簽進行判定。比如在<ul>中輸入.item，就會生成<li class="item"></li>。
下面是所有的隱式標簽名稱：
6. 定義多個元素
要定義多個元素，可以使用*符號。比如，ul>li*3可以生成如下代碼：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
7. 定義多個帶屬性的元素
如果輸入 ul>li.item$*3，將會生成如下代碼：
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
