Emmet.vim 教程

May 5, 2012

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

Emmet.vim 教程的更多相关文章

  1. 7张图片学习VIM教程

    7张图片学习VIM教程 张图片设置为桌面背景,时不时的能看上一眼.慢慢就学会VIM了. VIM lesson 1 VIM lesson 2 VIM lesson 3 VIM lesson 4 VIM ...

  2. 最好的vim教程莫过于vimtutor

    最好的vim教程莫过于vimtutor 直接运行vimtutor即可

  3. VIMTUTOR《VIM教程》

    =============================================================================== =      欢     迎     阅 ...

  4. vimtutor - Vim 教程

    总览 (SYNOPSIS) vimtutor 描述 (DESCRIPTION) Vimtutor 打开 Vim 教程. 它首先 考备 文件, 这样 就可以 在 不改变 原文件 的情况下 修改 当前文件 ...

  5. 《VIM教程》笔记

    一:vi ,vim, gvim简介 vi的功能是最弱的,它是*nix操作系统下最基本的文本编辑器. vim一开始的功能还不如vi,那个时候它的全称是"Vi IMitation",即 ...

  6. Gvim+Emmet.vim 那些事。

    转自:http://www.jianshu.com/p/67fa1e2114c5 背景 HTML和CSS的写法相对固定,而且重复的工作特别多,特别是尖括号实在是很烦.使用Emmet至少能帮你节省一半的 ...

  7. VIM教程

    vim 的环境设定参数 :set nu :set nonu             就是设定与取消行号啊! :set hlsearch :set nohlsearch     hlsearch 就是 ...

  8. [转载]VIM 教程:Learn Vim Progressively

    文章来源:http://yannesposito.com/Scratch/en/blog/Learn-Vim-Progressively/   Learn Vim Progressively   TL ...

  9. 经典 Linux & VIM 教程

    简明 Vim 练级攻略: http://coolshell.cn/articles/5426.html VIM快捷键: http://coolshell.cn/wp-content/uploads/2 ...

随机推荐

  1. Atitit mysql 存储过程捕获所有异常,以及日志记录异常信息

    Atitit mysql 存储过程捕获所有异常,以及日志记录异常信息 1.1. 异常的处理模式exit  continue undo模式 1 1.2. 捕获所有异常使用        DECLARE ...

  2. Mybatis(二) 全局配置文件详解

    这节来说说全局配置文件的东西,非常简单.看一遍就懂了. --WH 一.全部配置内容 SqlMapConfig.xml的配置内容和顺序如下,顺序不能乱.现在来对这些属性的意思一一进行讲解. 二.prop ...

  3. 如何在Mac的Finder中显示/usr,/tmp,/var等隐藏目录

    在终端里输入下面命令即可让它们显示出来. defaults write com.apple.finder AppleShowAllFiles -bool true 如果想恢复隐藏,可以用这个命令: d ...

  4. 物联网架构成长之路(29)-Jenkins环境搭建

    0. 说明 哈哈,前面中间插入了一篇Eclipse增加Git插件,在此之前真的没有用过GIT. 1. 运行Jenkins 这里为了方便,还是用Docker方式安装,由于这个是标准的war报,不对Doc ...

  5. 移动开发常用meta设置

    <!-- 视图窗口,移动端特属的标签. --> <meta name="viewport" content="width=device-width,in ...

  6. 如何使用maven优雅地管理项目版本号

    原文: https://blog.csdn.net/TeleDCOS/article/details/79853782

  7. sqoop 测试 --hive-delims-replacement 参数

    在hive的官方文档中给的例子中字段分隔符是\001,但是在他的API文档中--hive-delims-replacement ,--hive-drop-import-delims   参数中会处理的 ...

  8. mac os下不同工具go env下gopath显示不同

    设置 vim ~/.zshrc 设置 vim ~/.bash_profile

  9. java 爬取 国税局 省市区级联关系

    爬取网址 http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2018/index.html 因为数据比较大,存储为一个json,会内存溢出. 所以按照每 ...

  10. Linux 开机启动顺序_005

    ***了解Linux开机启动顺序之前先了解一下Linux运行级别,通过inittab配置文件查看运行级别的定义: [root@oldboy ~]# cat /etc/inittab # Default ...