Emmet.vim 教程

標籤：download   頭部   enter   extend   tor   github   setting   tutorial   支援   

Emmet.vim 教程

May 5, 2012

目錄

• 1 下載 Emmet.vim
• 2 安裝 Emmet.vim
• 3 使用 Emmet.vim
• 4 餘話

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 然後按快速鍵 <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 >> ~/.vimrclet 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 來擴充了。

Emmet.vim 教程