Emmet是一款非常流行的 HTML & CSS 快速编辑插件,它由 Yasuhiro Matsumoto 开发。下面是它的使用示例:
例1、 输入简写
+-------------------------------------
| html:5_
+-------------------------------------
“_” 光标位置. 然后输入 “<c-y>,” (Ctrl + y 和 逗号)
提示: 别担心,这个组合键是可以根据自己需求自定义的.
下面是按完组合键之后,生成的代码
+-------------------------------------
| <!DOCTYPE HTML>
| <html lang="en">
| <head>
| <title></title>
| <meta charset="UTF-8">
| </head>
| <body>
| _
| </body>
| </html>
+-------------------------------------
例2、输入简写
+-------------------------------------
| div#foo$*2>div.bar
+-------------------------------------
然后输入 “<c-y>,” (Ctrl + y 和 逗号)
生成的代码:
+-------------------------------------
|<div id="foo1">
| <div class="bar">_</div>
|</div>
|<div id="foo2">
| <div class="bar"></div>
|</div>
| _
+-------------------------------------
更多快捷输入:
http://github.com/mattn/emmet-vim/raw/master/TUTORIAL
下载地址:
http://github.com/mattn/emmet-vim
安装说明:
下载好之后,解压
# unzip emmet-vim.zip
将plugin/emmet.vim拷贝到 vim的plugin目录. 将autoload/emmet.vim拷贝到vim的autoload目录.
# cp -r plugin ~/.vim/.
# cp -r autoload ~/.vim/
如果你已经安装了pathogen.vim插件管理,可以进入~/vim/bundle将下载好的的emmet-vim.zip解压到这个文件夹下:
# cd ~/.vim/bundle
# unzip emmet-vim.zip
至于pathogen.vim的安装办法可以参考下面这篇文章:
你可以自定义一些配置:
let g:user_emmet_settings = {
\ 'indentation' : ' ',
\ 'perl' : {
\ 'aliases' : {
\ 'req' : 'require '
\ },
\ 'snippets' : {
\ 'use' : "use strict\nuse warnings\n\n",
\ 'warn' : "warn \"|\";",
\ }
\ }
\}
let g:user_emmet_expandabbr_key = '<c-e>'
let g:use_emmet_complete_tag = 1