Emmet.vim教程
文章來源:https://www.cnblogs.com/wuhua1/p/6848960.html
Emmet.vim 教程
May 5, 2012
目錄
Emmet 專案原先叫 Zen Coding,2012年的時候,專案啟用新名稱Emmet。
Emmet 官方支援很多文字編輯器/IDE,但Emmet.vim並非 Emmet 親生,它是由日本Yasuhiro Matsumoto開發。
下載 Emmet.vim
你可以從兩個地址下載,一是Vim 外掛站點,一是Github。
安裝 Emmet.vim
將下載的壓縮包解壓到 .vim 目錄下:
cd ~/.vim unzip emmet-vim.zip
如果你使用pathogen.vim管理 Vim 外掛:
cd ~/.vim/bundle unzip /path/to/emmet-vim.zip
或者直接從 Github 庫克隆一份:
cd ~/.vim/bundle git clone http://github.com/mattn/emmet-vim.git
個人建議通過 Pathogen 或Vundle來安裝。
使用 Emmet.vim
以下內容譯自Emmet.vim tutorial(Aug 6, 2013),感謝作者。
1. 展開
鍵入div>p#foo$*3>a
<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來擴充套件了。