emmet logo

Emmet.vim Tutorial

Emmet.vim tutorial originally published in the official github repo for emmet-vim.

Expand an Abbreviation

Type the abbreviation as div>p#foo$*3>a and type Ctrl+y ,.


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

Wrap with an Abbreviation

Write as below.


    test1
    test2
    test3
  

Then do visual select(line wise with shift+V) and type Ctrl+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>
  

Balance a Tag Inward

type Ctrl+y d in insert mode.

Balance a Tag Outward

type Ctrl+y D in insert mode.

Go to the Next Edit Point

type Ctrl+y n in insert mode.

Go to the Previous Edit Point

type Ctrl+y N in insert mode.

Update an img Size

Move cursor to the img tag.


    <img src="foo.png" />
  

Type Ctrl+y i on img tag


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

Merge Lines

select the lines, which include <li>


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

and then type Ctrl+y m


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

Remove a Tag

Move cursor in block


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

Type Ctrl+y k in insert mode.


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

And type Ctrl+y k in there again.

Split-Join Tag

Move the cursor inside block


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

Type Ctrl+y j in insert mode.


    <div class="foo"/>
  

And then type Ctrl+y j in there again.


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

Toggle Comment


    <div>
    	hello world
    </div>
  

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

    <div>
    	hello world
    </div>
  

Make an anchor from a URL


    http://www.google.com/
  

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

Make some quoted text from a URL


    http://github.com/
  

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

Installing emmet vim for the language you are using


    # 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
  

Enable emmet vim for the language you are using

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