Emmet.vim 教程
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 教程的更多相关文章
- 7张图片学习VIM教程
7张图片学习VIM教程 张图片设置为桌面背景,时不时的能看上一眼.慢慢就学会VIM了. VIM lesson 1 VIM lesson 2 VIM lesson 3 VIM lesson 4 VIM ...
- 最好的vim教程莫过于vimtutor
最好的vim教程莫过于vimtutor 直接运行vimtutor即可
- VIMTUTOR《VIM教程》
=============================================================================== = 欢 迎 阅 ...
- vimtutor - Vim 教程
总览 (SYNOPSIS) vimtutor 描述 (DESCRIPTION) Vimtutor 打开 Vim 教程. 它首先 考备 文件, 这样 就可以 在 不改变 原文件 的情况下 修改 当前文件 ...
- 《VIM教程》笔记
一:vi ,vim, gvim简介 vi的功能是最弱的,它是*nix操作系统下最基本的文本编辑器. vim一开始的功能还不如vi,那个时候它的全称是"Vi IMitation",即 ...
- Gvim+Emmet.vim 那些事。
转自:http://www.jianshu.com/p/67fa1e2114c5 背景 HTML和CSS的写法相对固定,而且重复的工作特别多,特别是尖括号实在是很烦.使用Emmet至少能帮你节省一半的 ...
- VIM教程
vim 的环境设定参数 :set nu :set nonu 就是设定与取消行号啊! :set hlsearch :set nohlsearch hlsearch 就是 ...
- [转载]VIM 教程:Learn Vim Progressively
文章来源:http://yannesposito.com/Scratch/en/blog/Learn-Vim-Progressively/ Learn Vim Progressively TL ...
- 经典 Linux & VIM 教程
简明 Vim 练级攻略: http://coolshell.cn/articles/5426.html VIM快捷键: http://coolshell.cn/wp-content/uploads/2 ...
随机推荐
- (原创)Rocketmq分布式消息队列的部署与监控
-------------------------------------------------------------------------------------------- 一.Rocke ...
- 从yield 到yield from再到python协程
yield 关键字 def fib(): a, b = 0, 1 while 1: yield b a, b = b, a+b yield 是在:PEP 255 -- Simple Generator ...
- 【Java】的四种引用的区别
强引用:如果一个对象具有强引用,它就不会被垃圾回收器回收.即使当前内存空间不足,JVM 也不会回收它,而是抛出 OutOfMemoryError 错误,使程序异常终止.如果想中断强引用和某个对象之间的 ...
- [转]Go语言中的make和new
前言 本文主要给大家介绍了Go语言中函数new与make的使用和区别,关于Go语言中new和make是内建的两个函数,主要用来创建分配类型内存.在我们定义生成变量的时候,可能会觉得有点迷惑,其实他们的 ...
- 【Dubbo 源码解析】05_Dubbo 服务发现&引用
Dubbo 服务发现&引用 Dubbo 引用的服务消费者最终会构造成一个 Spring 的 Bean,具体是通过 ReferenceBean 来实现的.它是一个 FactoryBean,所有的 ...
- VxWorks信号量问题
VxWorks主要提供如下API进行信号量的创建.获取和释放: 参数1:SEM_Q_PRIORITY,SEM_Q_FIFO SEM_Q_PRIORITY(值为0x1):需要获取该信号量的任务基于优 ...
- win7 win10开启网络访问(网络访问 无法访问 网络访问需要输入密码 等问题处理)
狂客原创,转载请注明.侵权必究! 右键单击桌面的“网络”图标 选择“属性”. 在弹出的“网络和共享中心”窗口,点击“更改高级共享设置”. 参考文章:https://jingyan.baidu.com/ ...
- 【thinkphp5】安全建议:隐藏后台登录入口地址
我们都知道后台 www.test.com/admin 是我们最常用的登录入口,方便的同时也留下了隐患,如果你刚好使用了 admin/ 这种账号密码的方式,会导致我们的后台完全暴露在外. 因此我们建 ...
- 用SUMIF对超15位的代码进行条件求和,出错了,原因是....
用SUMIF对超15位的代码进行条件求和,出错了,原因是.... 2017-10-29 23:01 一.问题 有读者朋友问: 用SUMIF进行条件求和时,如果统计的条件是超15位的代码,就会出错,比如 ...
- [Golang] 开源一个帧同步服务器
具体看README吧 https://github.com/bailu1901/lockstepserver