Emmet-vim 教程：提升HTML/CSS编写效率的Vim插件

原创于 2025-06-06 09:20:35 发布 · 330 阅读

7 ·

CC 4.0 BY-SA版权

Emmet-vim 教程：提升HTML/CSS编写效率的Vim插件

emmet-vim emmet for vim: http://emmet.io/ 项目地址: https://gitcode.com/gh_mirrors/em/emmet-vim

什么是Emmet-vim

Emmet-vim是Vim编辑器的一个强大插件，它通过简写语法大幅提升HTML和CSS的编写效率。该插件基于著名的Emmet工具（原Zen Coding），专为Vim用户优化，让开发者能够用极简的表达式快速生成复杂的HTML结构。

核心功能详解

1. 缩写展开功能

Emmet-vim最核心的功能是通过简写语法快速生成HTML结构。例如：

输入：div>p#foo$*3>a 按<c-y>,后会展开为：

<div>
    <p id="foo1">
        <a href=""></a>
    </p>
    <p id="foo2">
        <a href=""></a>
    </p>
    <p id="foo3">
        <a href=""></a>
    </p>
</div>

语法解析：

> 表示子元素
# 表示ID属性
$ 表示自增数字
* 表示重复次数

2. 内容包裹功能

对于已有的文本内容，可以快速用HTML标签包裹：

选中多行文本
按<c-y>,
输入包裹结构如ul>li*

<ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
</ul>

3. 标签范围操作

向内选择标签范围：<c-y>d
向外选择标签范围：<c-y>D

这对快速选择和操作嵌套标签特别有用。

4. 编辑点导航

在生成的HTML结构中快速跳转：

下一个编辑点：<c-y>n
上一个编辑点：<c-y>N

5. 图片尺寸自动添加

将光标放在img标签上，按<c-y>i会自动添加width和height属性：

<img src="foo.png" width="32" height="48" />

6. 行合并与拆分

合并行：选中多个li标签后按<c-y>m
标签拆分/合并：<c-y>j可在单标签和双标签形式间切换

7. 标签删除

快速删除当前所在标签：<c-y>k

8. 注释切换

快速添加/移除注释：<c-y>/

9. URL转换

转为链接：<c-y>a将URL转为<a>标签
转为引用块：<c-y>A生成包含引用的完整blockquote结构

高级配置

Emmet-vim支持针对不同语言的定制配置。在vimrc中添加：

let g:user_emmet_settings = {
  \  'php' : {
  \    'extends' : 'html',
  \    'filters' : 'c',
  \  },
  \  'xml' : {
  \    'extends' : 'html',
  \  },
  \  'haml' : {
  \    'extends' : 'html',
  \  },
  \}