Tutorial for Emmet.vim

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

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>
  </ul>

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

  <blockquote>
    test1
    test2
    test3
  </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.

  _empty_

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 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',
  \  },
  \}