Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
2 contributors

Users who have contributed to this file

@rgalbo @korneliakobiela
248 lines (174 sloc) 3.39 KB

Tutorial for Emmet.vim

mattn mattn.jp@gmail.com

Expand an Abbreviation

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>

Wrap with an Abbreviation

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>

Balance a Tag Inward

Just type <c-y>d in insert mode.

Balance a Tag Outward

Just type <c-y>D in insert mode.

Go to the Next Edit Point

Just type <c-y>n in insert mode.

Go to the Previous Edit Point

Just type <c-y>N in insert mode.

Update an ’s Size

Move cursor to the img tag.

<img src="foo.png" />

Type <c-y>i on img tag

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 <c-y>m

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

Remove the tag

Move cursor in block

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

Type 'k' in insert mode.

<div class="foo">

  </div>

And type 'k' in there again.

Split/Join Tag

Move the cursor inside block

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

Type 'j' in insert mode.

<div class="foo"/>

And then type 'j' in there again.

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

Toggle Comment

Move cursor inside the block

<div>
  	hello world
</div>

Type '/' in insert mode.

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

Type '/' in there again.

  <div>
  	hello world
  </div>

Make an anchor from a URL

Move cursor to URL

http://www.google.com/

Type '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 '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 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',
  \  },
  \}
You can’t perform that action at this time.