Improve Efficiency Emmet. vim and emmet. vim

Last Update:2015-08-30 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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

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
*`E3`**	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,*`@35`*Increase 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

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Improve Efficiency Emmet. vim and emmet. vim

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support