你在这里:主页 » 前端开发 » Emmet.vim 教程

Emmet.vim 教程

Emmet 项目原来叫 Zen Coding。由俄罗斯前端开发工程师 Sergey Chikuyonok 开发,后来在 Google Code 上释出 Zen Coding 项目。2012年的时候,项目启用新名称 Emmet

Emmet 官方支持很多软件,比如 Sublime Text、Notepad++、Dreamweaver、Eclipse、Adobe Brackets 等。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 来安装管理 Vim 插件。

使用 Emmet.vim#

以下内容译自 Emmet.vim tutorial,感谢作者

1. 展开缩略词#

键入缩略词组 div>p#foo$*3>a 然后按快捷键 <c-y>, – 指按 <Ctrl-y> 后再按逗号

<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 在其他编辑器的触发快捷键一般是 TabCtrl+e,如果你更习惯它们,也可以在 .vimrc 文件中加入下一行命令来修改它的触发快捷键:

let g:user_emmet_expandabbr_key = '<Tab>'

这样就可以按 Tab 来扩展了。

:

  1. ZenCoding cheatsheet

44 评论 -> “Emmet.vim 教程

  1. rainlonely

    在mac下zsh自带的VIM中 C-Y 无效, 应该如何解决 ?

  2. Scofield

    请问 指的是什么键啊?我是在mac上使用terminal的vim,我试了ctrl+字母键(Y),没用啊。。

  3. 兰西

    let g:user_emmet_expandabbr_key = ” 按tab键盘变得非常慢,非常卡,有没遇到过怎么解决

  4. 五磅兔

    老大,请问如果我想输入 这该用什么缩略来展开呢?我看过了教程,还有cheat sheet,结果还是没有弄明白,所以想在这里留言请教。

  5. 花瓣奶牛

    我找到哪个html 的模板怎么输入了 ,但是我想修改他给我插入的模板该怎么办

    • 依我想像,这 Emmet 原理大概是文本扩展(text expansion)相近,特定的文本,碰上某特殊按键,就扩展成某内容。找到相应部分并做修改应该就好。我想应该不必要具备 Vimscript 知识。

  6. 花瓣奶牛

    还有哦,那个用syntastic来检查html css 语法 好不好(如何设置呢?),有没有更好得推荐啊

  7. 花瓣奶牛

    博主大人,我最近也在学网页开发,而且我是一个linuxer和vimer,我想用vim来写网页,除了你提到的这个插件以外,还有啥插件值得推荐(就说说网页开发方面的vim插件)

    • 非常抱歉,我用 Vim,基本只用来做文本编辑,前端开发时,多时是用 Adobe Brackets、Sublime Text 这样的工具,所以对相应的 Vim 前端开发插件并不了解 – 除了这 Emmet for Vim。

  8. 五磅兔

    博主大人,请问怎样快速预览正在编写的网页呢?

    • 这个概念太大,恕我回答不出来。

      • 五磅兔

        是这样子,用vim-latex的时候,写过一段之后,可以通过按键 \ll 来排版,预览效果。 用vim emmet,写过一段,能不能有快捷键用网页浏览器打开正在编写的网页查效果呢?

        • 如果你喜欢 Vim 写网页的话,建议使用 Grunt.js – 我的博客里也有它的介绍内容。当 Grunt 监控的目录下文件有变化时,浏览器会自动刷新网页,就不需要 Vim 下 :w 后再按快捷键预览了。

  9. 五磅兔

    刚刚开始学习写网页。以前用vim latex suite插件来写tex文档。我觉得如果能够自动添加<++>,使用快速定位也是十分方便的。感觉emmet插件的快捷键,与vim的操作习惯不是十分契合。

  10. mc-zone

    请问怎么定制具体的生成规则,比如script默认生成《script》《/script》,而我想把它定制成《script type=”text/javascript”》《/script》,在网上找了很多都没有详细说明这一点的。我是从sublime text2 迁移到vim ,还不是很熟套,st2中貌似可以在插件包中的snippets.json更改,能否请问一下vim中详细怎么做?

  11. 飞羽

    另外我发现,用没有改名时的 zencoding for vim 这个插件输入 script 之后按,会带type 属性。不知道这算不算 emmet的 bug?

    • 嗨,非常抱歉,貌似我评论部分没处理好,结果 HTML 标签都被过滤掉,所以现在看到的你的评论多少是不完整的,只能是没办法回复。

  12. 飞羽

    为什么用在VIM 中用emmet插件输入 script 再按,之后出来的是,我想显示成正常的 是不是我输入的不完整呢?

  13. zx1986

    我常會把 snippet 跟 zencoding 搞混。 而且用 haml,jade,slim 後,發現 zencoding 似乎 ….. 呃。

  14. hafeyang

    很不错,但是我发现有几个功能用vim自带的命令会更快些,例如:

    3.3.3 选择标签 可以使用vit 选中标签内内容,vat可以直接选中包括整个标签内容 3.8.8 合并行,可以直接用行选中模块下按下J就行 3.9.9 移除标签对 ,可以同理使用 dit (delete inner tag) dat (delete around tag) ,cat cit 即可。

    我认为zencoding的杀手功能:

    css表达式展开,上一个/下一个编辑点 切换注释

  15. 其实还应该加上一种写法input[type=text size=30] ctrl+y+,后就生成:

  16. p

    这个插件最傻的是ctrl+y 过后再按其它键。其次傻的是ctrl+y+。我改成了ctrl+alt+ 和Notepad中的一样

评论

*

评论支持 Markdown 语法,推荐使用