Emmet-vim

emmet-vim is a vim plug-in which provides support for expanding abbreviations similar to emmet.

Installation

Download zip file:

cd ~/.vim
unzip emmet-vim.zip

To install using pathogen.vim:

git clone https://github.com/mattn/emmet-vim.git ~/.vim/bundle/emmet-vim

To install using Vundle:

" add this line to your .vimrc file
Plugin 'mattn/emmet-vim'

To install using Vim-Plug:

" add this line to your .vimrc file
Plug 'mattn/emmet-vim'

To checkout the source from repository:

cd ~/.vim/bundle
git clone https://github.com/mattn/emmet-vim.git

or:

git clone https://github.com/mattn/emmet-vim.git
cd emmet-vim
cp plugin/emmet.vim ~/.vim/plugin/
cp autoload/emmet.vim ~/.vim/autoload/
cp -a autoload/emmet ~/.vim/autoload/

Quick Tutorial

Open or create a New File:

vim index.html

Type ("_" is the cursor position):

html:5_

Then type

,

<meta charset="UTF-8">
<title></title>


_

More Tutorials

Enable in different mode

If you don't want to enable emmet in all modes, you can use set these options in

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.

Enable just for html/css

let g:user_emmet_install_global = 0
autocmd FileType html,css EmmetInstall

Redefine trigger key

To remap the default

let g:user_emmet_leader_key=''

Note that the trailing

,

,

Adding custom snippets

If you have installed the web-api for emmet-vim you can also add your own snippets using a custom snippets.json file.

Once you have installed the web-api add this line to your .vimrc:

let g:user_emmet_settings = webapi#json#decode(join(readfile(expand('~/.snippets_custom.json')), "\n"))

Here you can find instructions about creating your customized snippets.json file.

Snippet to add meta tag for responsiveness

Update this in your .vimrc file.

let g:user_emmet_settings = {
\  'variables': {'lang': 'ja'},
\  'html': {
\    'default_attributes': {
\      'option': {'value': v:null},
\      'textarea': {'id': v:null, 'name': v:null, 'cols': 10, 'rows': 10},
\    },
\    'snippets': {
\      'html:5': "\n"
\              ."\n"
\              ."\n"
\              ."\t\n"
\              ."\t\n"
\              ."\t\n"
\              ."\n"
\              ."\n\t${child}|\n\n"
\              ."",
\    },
\  },
\}

Project Authors

Yasuhiro Matsumoto

FAQ

• Pressing ctrl+y+, doesn't work

Probably you set

timeoutlen=0

timeoutlen=0

Links

Emmet official site:

• http://emmet.io/

zen-coding official site:

• http://code.google.com/p/zen-coding/

emmet.vim:

• https://mattn.github.io/emmet-vim/

development repository:

• https://github.com/mattn/emmet-vim

my blog posts about zencoding-vim:

• http://mattn.kaoriya.net/software/vim/20100222103327.htm

• http://mattn.kaoriya.net/software/vim/20100306021632.htm

Japanese blog posts about zencoding-vim:

• http://d.hatena.ne.jp/idesaku/20100424/1272092255

• http://d.hatena.ne.jp/griefworker/20110118/vim_zen_coding

• http://d.hatena.ne.jp/sakurako_s/20110126/1295988873

• http://looxu.blogspot.jp/2010/02/zencodingvimhtml.html

A Chinese translation of the tutorial:

• http://www.zfanw.com/blog/zencoding-vim-tutorial-chinese.html