Emmet.vim 教程

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 >> ~/.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 来扩展了。