vim快速编辑HTML和CSS插件安装和使用说明

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的安装办法可以参考下面这篇文章:

https://www.anspoon.com/uncategorized/171.html

你可以自定义一些配置:

 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


留下评论