Emmet 項目原先叫 Zen Coding，2012年的時候，項目啓用新名稱 Emmet。git
Emmet 官方支持不少文本編輯器/IDE，但 Emmet.vim 並不是 Emmet 親生，它是由日本 Yasuhiro Matsumoto 開發。github
下載 Emmet.vim
你能夠從兩個地址下載，一是 Vim 插件站點，一是 Github。vim
安裝 Emmet.vim
將下載的壓縮包解壓到 .vim 目錄下：編輯器
cd ~/.vim
unzip emmet-vim.zip
若是你使用 pathogen.vim 管理 Vim 插件：google
cd ~/.vim/bundle
unzip /path/to/emmet-vim.zip
或者直接從 Github 庫克隆一份：spa
cd ~/.vim/bundle
git clone http://github.com/mattn/emmet-vim.git
我的建議經過 Pathogen 或 Vundle 來安裝。.net
使用 Emmet.vim
如下內容譯自 Emmet.vim tutorial（Aug 6, 2013），感謝做者。插件
1. 展開
鍵入 div>p#foo$*3>a 而後按快捷鍵 <c-y>, – 表示 <Ctrl-y> 後再按逗號，不妨把 Ctrl-y當作 emmet 指令的啓動，就像 Vim 的 : 表示進入命令行模式。
<div>
<p id="foo1">
<a href=""></a>
</p>
<p id="foo2">
<a href=""></a>
</p>
<p id="foo3">
<a href=""></a>
</p>
</div>
2. 外部包住
以下內容：
test1
test2
test3
按大寫的 V 進入 Vim 可視模式，「行選取」上面三行內容，而後按鍵 <c-y>,，這時 Vim 的命令行會提示 `Tags:`，鍵入 `ul>li*`，而後按 Enter，結果以下：
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
而假如輸入的 tag 是 blockquote’，則結果會變成下面這樣：
<blockquote>
test1
test2
test3
</blockquote>
3.插入模式下根據光標位置選中整個標籤
按 <c-y>d
4.插入模式下根據光標位置選中整個標籤內容
按 <c-y>D
5.跳轉到下一個編輯點
插入模式下按 <c-y>n
6.跳轉到上一個編輯點
插入模式下按 <c-y>N
7.更新圖片大小
移動光標到 img 標籤。
<img src="foo.png" />
而後按 <c-y>i，結果以下：
<img src="foo.png" width="32" height="48" />
注：僅適用本地圖片，互聯網上的圖片並沒有法取得其大小。
8.合併行
選擇下面的全部 `<li>` 行
<ul>
<li class="list1"></li>
<li class="list2"></li>
<li class="list3"></li>
</ul>
而後按 <c-y>m，結果以下：
<ul>
<li class="list1"></li><li class="list2"></li><li class="list3"></li>
</ul>
9.移除標籤對
首先，移動光標到塊中
<div class="foo">
<a>cursor is here</a>
</div>
而後在插入模式下按 <c-y>k，結果以下：
<div class="foo">
</div>
再次按 <c-y>k 則上面代碼塊中連 div 標籤塊都會被移除。
10.分割/合併標籤
首先，移動光標到塊中
<div class="foo">
cursor is here
</div>
在插入模式下按 <c-y>j：
<div class="foo"/>
再次按 <c-y>j：
<div class="foo">
</div>
11.切換註釋
首先，移動光標到塊中
<div>
hello world
</div>
插入模式中按 <c-y>/：
<!-- <div>
hello world
</div> -->
再按 <c-y>/ 則恢復：
<div>
hello world
</div>
12.從 URL 地址生成錨
將光標移至 URL
http://www.google.com/
按 <c-y>a
<a href="http://www.google.com"></a>
13.從 URL 地址生成引用文本
移動光標到 URL
http://github.com/
按 <c-y>A
<blockquote class="quote">
<a href="http://github.com/"></a><br />
<p>...</p>
<cite>http://github.com/</cite>
</blockquote>
14.安裝 Emmet.vim
見文章頭部。
15.爲你所用的語言啓用 Emmet.vim
你能夠爲你用的語言自定義行爲。
# cat >> ~/.vimrc
let g:user_emmet_settings = {
\ 'php' : {
\ 'extends' : 'html',
\ 'filters' : 'c',
\ },
\ 'xml' : {
\ 'extends' : 'html',
\ },
\ 'haml' : {
\ 'extends' : 'html',
\ },
\}
餘話
除了以上幫助，你還能夠按:進入 Vim 命令行模式，而後輸入 help emmet 在新窗口中調用 Emmet 的幫助內容。
Emmet 在其餘編輯器的觸發快捷鍵通常是 Tab 或 Ctrl+e，若是你更習慣它們，也能夠在 .vimrc 文件中加入下一行命令來修改它的觸發快捷鍵：
let g:user_emmet_expandabbr_key = '<Tab>'
這樣就能夠按 Tab 來擴展了。