你在这里:主页 » 前端开发 » 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

35 评论 -> “Emmet.vim 教程

  1. 五磅兔 says:

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

    1. 陈 三 says:

      我不知道你要输入的是什么,评论里有些 HTML 标签被 WordPress 过滤掉,能贴个 gist 之类的会更好。

  2. 花瓣奶牛 says:

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

    1. 陈 三 says:

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

  3. 花瓣奶牛 says:

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

  4. 花瓣奶牛 says:

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

    1. 陈 三 says:

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

      1. 花瓣奶牛 says:

        总之还是谢谢博主大人

      2. 花瓣奶牛 says:

        试用了一下emmet 好像他没有自动检查文件类型而插入相关的 代码块的功能,对吗? 例如编辑一个新的html 文件,他自动插入

        1. 花瓣奶牛 says:

          被屏蔽了 以c语言为例 ,vim检测到你写的是c文件的时候,自动插入头文件和main函数给你的

  5. 五磅兔 says:

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

    1. 陈 三 says:

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

      1. 五磅兔 says:

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

        1. 陈 三 says:

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

  6. 五磅兔 says:

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

    1. 陈 三 says:

      Vim 里大量使用快捷键,顺手的根本没剩下几个。建议用 Adobe Brackets

  7. mc-zone says:

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

    1. 陈 三 says:

      同样可以使用 Emmet 提供的 snippets 功能。

      在 .vimrc 文件中加入如下:

      
      let g:user_emmet_settings={     
      \  'html':{
      \     'snippets':{
      \        'script':"<script type=\"text\/javascript\">${cursor}<\/script>"
      \         }
      \        }
      \    }
      

      更多可以参考:

      1. 1. Emmet for vim doc 页面 Define Tag’s Behavior 部分
      2. 2. Emmet snippets
      1. mc-zone says:

        啊,非常感谢!解决了我的疑惑。

      2. maonx says:

        我问下 自定义的功能怎么设置 我按照你的方法 还是没有效果

        1. 陈 三 says:

          方便的话,把你的代码贴上来看看。

  8. 飞羽 says:

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

    1. 陈 三 says:

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

  9. 飞羽 says:

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

  10. zx1986 says:

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

    1. 陈三 says:

      我试过HAML,更像 template,与后端语言结合;如果写纯静态页面,我觉得还是 ZenCoding 适合。

      1. zx1986 says:

        沒錯!

        我碰到很多時候是規劃 HTML layout 時,element 會一直換位置, 這個時候 haml 這類的階層式排列就很有優勢了。

        請教一下,zencoding 在 *.scss 這類的檔案內如何啓用? 每次都要執行一下 :set ft=css 嗎?

        1. 陈三 says:
          1. BEM 里用 xml 或 json 实现你用haml 实现的。 http://bem.info/method/definitions/
          2. 可以利用gvim 的自动命令功能设定读取 scss 文件时设定文件类型: autocmd BufNewFile,BufRead *.scss set ft=css
          1. zx1986 says:

            漂亮!感謝您!

  11. hafeyang says:

    很不错,但是我发现有几个功能用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表达式展开,上一个/下一个编辑点 切换注释

  12. yansong says:

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

    1. 陈 三 says:

      你说的这个现在已经实现了。

  13. p says:

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

    1. chenxsan says:

      XD.

评论

*

你可以使用这些 HTML 标签与属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>