Zen Coding是知名的前端編碼輔助工具，可以極大簡化HTML/CSS代碼輸入。簡單說Zen Coding就是一個強大、智能的自動補全工具。出於品牌管理的考慮，Zen Coding這個名字已成往事，2012年年末作者把它改名為Emmet。其實我挺喜歡她原先大氣上檔次的名字，所以冒着標題黨的危險，用Zen coding做標題，其實下面主要講的是Emmet。
盡管Emmet（螞蟻）名字略顯屌絲，不過相比更新之前的 Zen Coding，支持的編輯器更多了，包括：Sublime Text，TextMate， Eclipse，Coda，NotePad++，CodeMirror等，甚至一些在線代碼服務也支持：JSFiddle、JS Bin等。功能也增強了很多，提供了對HTML5和CSS3的支持，下面列舉一些進行說明：
HTML縮寫語法
輸入 ! 或者 html:5 再按Tab可以輸出HTML基本結構：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
上面輸出的是HTML5的文本類型申明，如果想要輸出HTML4文本類型申明可以輸入 html:4s 或者 html:4t 。
基本的標簽縮寫和展開形式如下：
a -> <a href=""></a>
div.class -> <div class="class"></div>
div#id -> <div id="id"></div>
div>p -> <div><p></p></div>
div+p -> <div></div><p></p>
Emmet能夠智能的補全標簽名，如果輸入省略了標簽名，默認使用div，除非上下文標簽有關聯的情況，比如在 ul 中會自動采用 li：
.class -> <div class="class"></div>
ul>.class -> <ul><li class="class"></li></ul>
除了這些，Emmet考慮到了一些復雜的標簽結構，因此提供了非常豐富的縮寫方式，比如：
標簽屬性
a[href] -> <a href=""></a>
一些標簽屬性還有進一步的縮寫：
a:link -> <a href="http://"></a>
input:c -> <input type="checkbox" name="" id="" />
組合
(div>p)+(div>span) -> <div><p></p></div> <div><span></span></div>
標簽計數
ul>li*2 ->
<ul>
<li></li>
<li></li>
</ul>
ul>li.item$*2 ->
<ul>
<li class="item1"></li>
<li class="item2"></li>
</ul>
注釋及條件注釋
c -> <!-- -->
cc:ie6 -> <!--[if lte IE 6]> <![endif]-->
CSS縮寫語法
跟HTML的補全相比，CSS的補全更強大。Emmet會識別不完整的CSS屬性，自動選擇最匹配的結果來展開，比如 ov:h 或者 overf:h 都會展開成 overflow:hidden 。
屬性
CSS的縮寫官方有說明，基本是屬性名縮寫，比如：
pos:s -> position:static;
mr -> margin-right:;
CSS屬性非常多，包括CSS3的屬性都能通過類似的縮寫來展開，記不住官方文檔里的縮寫也不要緊，前面說了她的智能匹配特性，憑感覺寫就好，你的想法Emmet基本都能猜到的。
屬性前綴
CSS3的很多屬性都包含瀏覽器廠商前綴，寫起來異常蛋疼，不過沒關系，用Emmet寫CSS3屬性會自動添加前綴，比如輸入trs 會展開為：
-webkit-transition: prop time;
-moz-transition: prop time;
-ms-transition: prop time;
-o-transition: prop time;
transition: prop time;
屬性值 Emmet支持自動擴展屬性值單位，比如 w100 展開以后是width: 100px; ，當然不僅僅支持像素，還支持%和em：
w10 -> width:10px;
w10p -> width:10%;
w1.5e -> width:1.5em
看到這里想必你已躍躍欲試，如本文開頭所說，Emmet的編輯器插件已經覆蓋到Mac和Windows下的幾款主流編輯器，不妨今天就裝一個試試。
詳細的語法參考手冊，有興趣的同學可以到這里查看：http://docs.emmet.io/cheat-sheet/ 。
參考資料
本站文章均由遠塵原創，轉載請注明：
轉載自前端網事博客，本文鏈接地址:Zen Coding 禪境編程