Home > Developer > Web Develop
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 | githubEmmet-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
: Emmet-vim.zip
Decompress~/.vim
# cd ~/.vim# unzip emmet-vim.zipOpen vim and you can use it.
UseMainlyAbbreviationTo generateCode block
Example:
+------------------------------------- | html:5_ +------------------------------------- _Indicates the cursor position<c-y>RepresentativeCtrl + y <c-y>,RepresentativeCtrl + yAgainAdd a comma
html:5Generate the basic structure of HTML5 DOCTYPE
Enterhtml:5And then use the command<c-y>,Actually Input!The effect is equivalenthtml:5
2------- Extended -------
!, Equivalent
html:5, Generate HTML5 doctype
Html: xt, Generate XHTML transitional doctype
Html: 4 s, Generate HTML4 strict doctype
.headerGenerate
class = "header"Div
Enter.headerAnd then use the command<c-y>,The header can beAny name
#wrapperGenerate
id = "wrapper"Div
Enter#wrapperAnd then use the command<c-y>,
4------- Extended -------
Combination, inputP. clazz # pid, Generate:
<p id="pid" class="clazz"></p>
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
EHTML Tag
E#idRepresentative tagEYesIdAttribute
E.classRepresentativeEYesClassAttribute
E[attr=foo]Represents a specific attribute
E{info}Representative tagEThe content isInfo
E>NRepresentativeNYesEChild Element
E+NRepresentativeNYesESame level element
E^NRepresentativeNYesEUpper-level element
E*3Indicates repeated output.ETag3Times
(E+N)*3RepresentativeNAndEA 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>dSelect the entire tag Based on the cursor position in insert mode.
<c-y>DSelect the entire TAG content based on the cursor position in insert mode.
<c-y>nJump to the next editing point
<c-y>NJump to the previous editing point
<c-y>mMerge rows
<c-y>kRemove tag pairs
<c-y>jSplit/merge tags
<c-y>/Switch Annotation
<c-y>aGenerate an anchor from a URL
<c-y>AGenerate 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
