Improve Efficiency Emmet. vim and emmet. vim

Source: Internet
Author: User

Improve Efficiency Emmet. vim and emmet. vim
Improve Efficiency Emmet. vim

Reprinted please indicate the source: http://blog.csdn.net/hpu_zyh/article/details/48069159
Blog homepage | simplified book | zhihu | Weibo | github

Emmet-The essential toolkit for web-developers
EmmetWith powerfulVimIt's no longer beautiful.
HeardEmmentAndVimBetter configuration (haha, the more correct this is)

It can also be usedSublime Text(Downloaded by default), official website

Download

: Emmet-vim.zip
Decompress~/.vim

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

Open vim and you can use it.

Use

MainlyAbbreviationTo generateCode block
Example:

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

_Indicates the cursor position
<c-y>RepresentativeCtrl + y
<c-y>,RepresentativeCtrl + yAgainAdd a comma

1 html:5Generate the basic structure of HTML5 DOCTYPE

Enterhtml:5And then use the command<c-y>,Actually Input!The effect is equivalenthtml:5

------- Extended -------

!, Equivalenthtml:5, Generate HTML5 doctype
Html: xt, Generate XHTML transitional doctype
Html: 4 s, Generate HTML4 strict doctype

2 .headerGenerate class = "header"Div

Enter.headerAnd then use the command<c-y>,The header can beAny name

3 #wrapperGenerate id = "wrapper"Div

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

------- Extended -------

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

4 h1{foo}, Generate:

------- Extended -------

Inputa , Generate<a href=""></a>
Inputa:link , Generate<a href="http://"></a>
Inputimg, Generate
Inputlink, Generate<link rel="stylesheet" href="">
Inputlink:css, Generate<link rel="stylesheet" href="style.css">
More automatic tag filling attributes

5 h1+h2Generate

6 >Generate SubordinateLabel

Enterheader>divAnd then use the command<c-y>,

------- Extended -------
header^divGenerate parent tag
header+divGenerate peer tags

7 *Generate several times of tags

8 $Variable to generate different values

div>p#test$*3>a:DivInsert in tag3Sub-tag. The content of each sub-tag isPTagid= "test1"EmbeddedATag

9 switch comments
<div>    hello world</div>

Move the cursor to the div, and press<c-y>/

<!-- <div>    hello world</div> -->
Generate an HTML5 Page Structure

<! -- The following section can be generated directly at once -->!> (Header>. header>. logo {logo} + nav> ul> (li> a [href = "#"] {item $}) * 4) + (section>. wrapper> h1 + article> h1 + header + p + footer) + (footer>. footer> p {@ copyright 2015 })

The generated content is as follows:

<!DOCTYPE html>
Summary

Sub-Level>, Same level+, Upgrade level^, Repeated output*, Group output()Basic Property id#Basic Attribute class., Custom Attributes[], Attribute auto-Increment$, Text attributes{}

EHTML Tag

Abbreviations Generated Content
E HTML Tag
E#id Representative tagEYesIdAttribute
E.class RepresentativeEYesClassAttribute
E[attr=foo] Represents a specific attribute
E{info} Representative tagEThe content isInfo
E>N RepresentativeNYesEChild Element
E+N RepresentativeNYesESame level element
E^N RepresentativeNYesEUpper-level element
E*3 Indicates repeated output.ETag3Times
(E+N)*3 RepresentativeNAndEA group of same-level labels, repeated output3Times
E$ $IsAuto-IncrementVariable, common and*Combined Use
E@ @You can set variable rules,@-IsAuto-SubtractionVariable,@3*5Increase the number by 5 from 3.*Combined Use
Shortcut Keys in vim Generated Content
<c-y>d Select the entire tag Based on the cursor position in insert mode.
<c-y>D Select the entire TAG content based on the cursor position in insert mode.
<c-y>n Jump to the next editing point
<c-y>N Jump to the previous editing point
<c-y>m Merge rows
<c-y>k Remove tag pairs
<c-y>j Split/merge tags
<c-y>/ Switch Annotation
<c-y>a Generate an anchor from a URL
<c-y>A Generate reference text from URL address

.

Complete syntax

Refer:
Http://www.vim.org/scripts/script.php? Script_id = 1, 2981
Https://raw.githubusercontent.com/mattn/emmet-vim/master/TUTORIAL
Http://www.jianshu.com/p/ad8a6a786054
Http://www.jianshu.com/p/5e099ebaa26a
Http://html5.9tech.cn/news/2013/1010/33090.html

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger. Reprint please indicate the source http://blog.csdn.net/hpu_zyh

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.