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 />’s 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

Move cursor inside the block


    <div>
    	hello world
    </div>

Type Ctrl+y / in insert mode.


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

Type Ctrl+y / in there again.


    <div>
    	hello world
    </div>

Make an anchor from a URL

Move cursor to URL


    http://www.google.com/

Type Ctrl+y a


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

Make some quoted text from a URL

Move cursor to the URL


    http://github.com/

Type Ctrl+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>

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

Emmet.vim Tutorial