Increase efficiency Emmet.vim

Increase efficiency Emmet.vim

Reprint Please specify source: http://blog.csdn.net/hpu_zyh/article/details/48069159
Blog Home | Jane Book | Know | Weibo | GitHub

Emmet -the Essential Toolkit for Web-developers
Emmet with a powerful Vim, simply can't be beautiful anymore.
I heard that emment and Vim are more worthy of OH (haha, the more right is it)

can also be used for Sublime Text (the default has already been downloaded), official website

Download

: Emmet-vim.zip
Unzip to~/.vim

# cd ~/.vim# unzip emmet-vim.zip

Open vim and you can use it.

Use

The main use of abbreviations to generate code blocks
Example:

   +-------------------------------------   | html:5_   +-------------------------------------   

_Represents the cursor position
<c-y>Representative Ctrl + y
<c-y>,Representative Ctrl + y again加逗号

1 html:5DOCTYPE basic structure for generating HTML5

Enter first html:5 , and then use the command <c-y>, to actually enter the ! effect equal tohtml:5

—————— – Extended —————— –

! , equivalent to html:5 , generate HTML5 DOCTYPE
html:xt, generating XHTML transitional DOCTYPE
html:4s, generating HTML4 strict doctype

2 .headerGenerated class = "header"The DIV

Enter first .header , then use the command <c-y>, header can be any name

3 #wrapperGenerated id = "wrapper"The DIV

Enter first #wrapper , then use the command <c-y>,

—————— – Extended —————— –

Combination, input p.clazz#pid, Generate:<p id="pid" class="clazz"></p>

4 h1{foo}Generated:

—————— – Extended —————— –

Input a , generating <a href=""></a>
Input a:link , generating <a href="http://"></a>
Input img , generating
Input link , generating <link rel="stylesheet" href="">
Input link:css , generating <link rel="stylesheet" href="style.css">
More auto-fill label properties

5h1+h2Generated

6>GeneratedNestingThe label

Enter first header>div , then use the command <c-y>,

7*Generate a label several times

8$Variable, generating a different value

div>p#test$*3>a: Insert 3 sub-tags inside div tag, each sub-label content is p tag id= "test1" embedded a tag

9 Toggle Annotations

<div>    hello world</div>

Move the cursor to DIV, insert mode, press<c-y>/

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

Generate a HTML5 page structure

Reference:
http://www.vim.org/scripts/script.php?script_id=2981
Https://raw.githubusercontent.com/mattn/emmet-vim/master/TUTORIAL

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced. Reprint please indicate the source Http://blog.csdn.net/hpu_zyh

Increase efficiency Emmet.vim