This documentation is for emmet-vim: a vim plug-in which provides support for expanding abbreviations similar to emmet. Note: the <c-y> notation is shorthand for holding the ctrl button and pressing the letter y.

Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow.

Basically, most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.

Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.

Type the abbreviation as div>p#foo$*3>a' and type <c-y>,

  <div>
    <p id="foo1">
      <a href=""></a>
    </p>
    <p id="foo2">
      <a href=""></a>
    </p>
    <p id="foo3">
      <a href=""></a>
    </p>
  </div>
        

Write as below.

• test1
• test2
• test3
• test4
• test5

Then do visual select (line wise) and type <c-y>,. Once you get to the 'Tag:' prompt, type 'ul>li*'

  <ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
    <li>test4</li>
    <li>test5</li>
  </ul>
        

If you type a tag, such as 'blockquote', then you'll see the following:

  <blockquote>
    test1
    test2
    test3
    test4
    test5
  </blockquote>
        

Type <c-y>d in insert mode.

Type <c-y>D in insert mode.

Type <c-y>n in insert mode.

Type <c-y>N in insert mode.

Move cursor to the img tag.

  <img src="foo.png" />
        

Type <c-y>i on img tag.

  <img src="foo.png" width="32" height="48" />
        

Select the lines, which include <li>

  <ul>
    <li class="list1"></li>
    <li class="list2"></li>
    <li class="list3"></li>
  </ul>
        

and then type <c-y>m

  <ul>
    <li class="list1"></li><li class="list2"></li><li class="list3"></li>
  </ul>
          

Move cursor in block.

  <div class="foo">
    <a>cursor is here</a>
  </div>
        

Type <c-y>k in insert mode.

  <div class="foo">

  </div>
        

And type <c-y>k in there again.

Move the cursor inside block.

  <div class="foo">
    cursor is here
  </div>
        

Type <c-y>j in insert mode.

  <div class="foo"/>
        

And then type <c-y>j in there again.

  <div class="foo">
  </div>
        

Move cursor inside the block.

  <div>
    hello world
  </div>
        

Type <c-y>/ in insert mode.

  <!-- <div>
    hello world
  </div> -->
        

Type <c-y>/ in there again.

  <div>
    hello world
  </div>
        

Move cursor to the URL.

  http://www.google.com/
        

Type <c-y>a

  <a href="http://www.google.com/">Google</a>
        

Move cursor to the URL.

  http://github.com/
        

Type <c-y>A

  <blockquote class="quote">
    <a href="http://github.com/">Secure source code hosting and collaborative development - GitHub</a><br />
  <p>How does it work? Get up and running in seconds by forking a project, pushing an existing repository...</p>
  <cite>http://github.com/</cite>
  </blockquote>
        

  # cd ~/.vim
  # unzip emmet-vim.zip
      

Or if you are using pathogen.vim:

  # cd ~/.vim/bundle # or make directory
  # unzip /path/to/emmet-vim.zip
        

Or if you get the sources from the repository:

  # cd ~/.vim/bundle # or make directory
  # git clone http://github.com/mattn/emmet-vim.git
        

You can customize the behavior of the languages you are using.

  # cat >> ~/.vimrc
  let g:user_emmet_settings = {
  \  'php' : {
  \    'extends' : 'html',
  \    'filters' : 'c',
  \  },
  \  'xml' : {
  \    'extends' : 'html',
  \  },
  \  'haml' : {
  \    'extends' : 'html',
  \  },
  \}
        

This documentation taken from emmet-vim github page here.