Emmet.vim Tutorials

Emmet.vim Tutorials

May 5, 2012

Directory

• 1 Downloads Emmet.vim
• 2 Installing Emmet.vim
• 3 Using Emmet.vim
• More than 4 words

When the Emmet project was originally called Zen coding,2012 year, the project enabled the new name Emmet.

Emmet official support for many text editor/ide, but Emmet.vim is not Emmet biological, it is developed by the Japanese Yasuhiro Matsumoto.

download Emmet.vim#

You can download from two addresses, one is the Vim plugin site, one is Github.

install Emmet.vim#

Unzip the downloaded compressed package into the. Vim directory:

  CD ~/.vim  unzip Emmet-vim.zip
cd ~/.vim
  unzip emmet-vim.zip

If you use Pathogen.vim to manage vim plugins:

 cd ~/.vim/bundle
  unzip /path/to/emmet-vim.zip

or clone a copy directly from the Github library:

cd ~/.vim/bundle
  git clone http://github.com/mattn/emmet-vim.git

Personal advice to install via pathogen or vundle.

using Emmet.vim#

The following content is translated from Emmet.vim tutorial (6, 2013), thanks to the author.

1. Expand

Typediv>p#foo$*3>aand then press the shortcut key<c-y>,– Indicate <ctrl-y> then press the comma ,Ctrl-yit may be considered as the start of the Emmet directive, just like Vim's:representation into the command line mode.

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

2. External Package

The following content:

 test1
  test2
  test3

Venter vim visual mode in uppercase, "line select" above three lines of content, then press the key<c-y>,, then Vim's command line prompt ' Tags: ', type ' ul>li* ', then pressEnter, the result is as follows:

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

And if the input tag is blockquote ', the result will be the following:

<blockquote>
    test1
    test2
    test3
</blockquote>

3. Select the entire label according to the cursor position in the Insert mode

By<c-y>d

4. Select the entire label content according to the cursor position in the Insert mode

By<c-y>D

5. Jump to the next edit point

In insert mode, press the<c-y>n

6. Jump to previous edit point

In insert mode, press the<c-y>N

7. Update the image size

Move the cursor to the IMG tag.

 <img src="foo.png" />

Then press<c-y>i, the results are as follows:

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

Note: Only local images are available, and images on the Internet cannot be sized.

8. Merging rows
Select all the `<li>` lines below

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

Then press <c-y>m and the result is as follows:

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

9. Remove the tag pair
First, move the cursor to the block

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

Then press <c-y>k in insert mode and the result is as follows:

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

Press <c-y>k again and the div tag block in the above code block will be removed.

10. Split/merge labels
First, move the cursor to the block

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

Press <c-y>j in insert mode:

<div class="foo"/>

Press <c-y>j again:

<div class="foo">

</div>

11. Switch notes
First, move the cursor to the block

<div>
    hello world
</div>

Press <c-y>/: in insert mode

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

Press <c-y>/ again to restore:

<div>
    hello world
</div>

12. Generate an anchor from a URL address
Move the cursor to the URL

http://www.google.com/

Press <c-y>a

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

13. Generate reference text from a URL address
Move the cursor to the URL

http://github.com/

Press <c-y>A

<blockquote class="quote">
    <a href="http://github.com/"></a><br />
    <p>...</p>
    <cite>http://github.com/</cite>
</blockquote>

14. Install Emmet.vim
See the article head.

15. Enable Emmet.vim for the language you are using.
You can customize the behavior for the language you use.

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

In addition to the above help, you can also press: enter Vim command line mode, and then enter help emmet to call Emmet's help content in a new window.

Emmet trigger shortcuts in other editors are generally Tab or Ctrl+e. If you are more accustomed to them, you can also modify the trigger shortcut by adding the next line to the .vimrc file:

let g:user_emmet_expandabbr_key = ‘<Tab>‘

This way you can expand by pressing Tab.

Emmet.vim tutorial