linux vim emmet,vim插件emmet-vim | 木凡博客

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具。基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：你必须先定义你得代码片段，并且不能再运行时进行拓展。

Emmet把片段这个概念提高到了一个新的层次：你可以设置CSS形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员，但也可以用于编程语言。

一、下载 Emmet.vim

你可以从两个地址下载Emmet插件，一是 Vim 插件站点，一是 Github。

二、安装 Emmet.vim

将下载的压缩包解压到 .vim 目录下：

Shell

cd ~/.vim

unzip emmet-vim.zip

1

2

cd~/.vim

unzipemmet-vim.zip

如果你使用 pathogen.vim 管理 Vim 插件：

Shell

cd ~/.vim/bundle

unzip /path/to/emmet-vim.zip

1

2

cd~/.vim/bundle

unzip/path/to/emmet-vim.zip

或者直接从 Github 库克隆一份：

Shell

cd ~/.vim/bundle

git clone http://github.com/mattn/emmet-vim.git

1

2

cd~/.vim/bundle

gitclonehttp://github.com/mattn/emmet-vim.git

个人建议通过 Pathogen 或 前面讲到的Vundle来安装插件。

三、配置 Emmet.vim

以下是我在_vimrc中的配置

Vim

" 只在html和css文件中起作用

let g:user_emmet_install_global = 0

autocmd FileType html,css EmmetInstal

" 修改Emmet扩展键 实现F2补全

let g:user_emmet_expandabbr_key = ''

" 修改Emmet默认快捷键 将默认的修改成方便操作

let g:user_emmet_leader_key = ''

" 对于vim的不同模式,可以在_vimrc有不同配置:

let g:user_emmet_mode='n' "only enable normal mode functions.

let g:user_emmet_mode='inv' "enable all functions, which is equal to

let g:user_emmet_mode='a' "enable all function in all mode.

1

2

3

4

5

6

7

8

9

10

11

12

" 只在html和css文件中起作用

letg:user_emmet_install_global=0

autocmdFileTypehtml,cssEmmetInstal

" 修改Emmet扩展键 实现F2补全

letg:user_emmet_expandabbr_key=''

" 修改Emmet默认快捷键 将默认的修改成方便操作

letg:user_emmet_leader_key=''

" 对于vim的不同模式,可以在_vimrc有不同配置:

letg:user_emmet_mode='n'"only enable normal mode functions.

letg:user_emmet_mode='inv'"enable all functions, which is equal to

letg:user_emmet_mode='a'"enable all function in all mode.

四、使用 Emmet.vim

以下内容译自作者帮助文档：

1. 展开

键入 div>p#foo$*3>a 然后按快捷键 , – 表示 后再按逗号，不妨把 Ctrl-y看成 emmet 指令的启动，就像 Vim 的 : 表示进入命令行模式。

1

2

3

4

5

6

7

8

9

10

11

2. 外部包住

如下内容：

test1

test2

test3

1

2

3

test1

test2

test3

按大写的 V 进入 Vim 可视模式，“行选取”上面三行内容，然后按键 ,，这时 Vim 的命令行会提示 Tags:，键入 ul>li*，然后按 Enter，结果如下：

• test1
• test2
• test3

1

2

3

4

5

• test1
• test2
• test3

而假如输入的 tag 是 blockquote’，则结果会变成下面这样：

test1

test2

test3

1

2

3

4

5

test1

test2

test3

3.插入模式下根据光标位置选中整个标签

按 d

4.插入模式下根据光标位置选中整个标签内容

按 D

5.跳转到下一个编辑点

插入模式下按 n

6.跳转到上一个编辑点

插入模式下按 N

7.更新图片大小

移动光标到 img 标签。

1

然后按 i，结果如下：

1

注：仅适用本地图片，互联网上的图片并无法取得其大小。

8.合并行

选择下面的所有

行

1

2

3

4

5

然后按 m，结果如下：

1

2

3

9.移除标签对

首先，移动光标到块中

cursor is here

1

2

3

cursorishere