Installation and use of sublime Text3 plug-in Emmet

This article reprint, author thanks the selfless sharing!

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
This link: HTTPS: //blog.csdn.net/xiaozhi_2016/article/details/52415897
Emmet (formerly known as Zen Coding) is a front-end development can greatly improve the efficiency of a tool. Basically, most of the text editor will allow you to store and reuse blocks of code, which we call "slice." Although the fragment can well push your productivity, but most implementations have such a drawback: you must first define your code snippets, and can not be expanded at runtime. Emmet fragment to improve this concept to a new level: You can set the CSS forms can be resolved dynamic expression, and then get the appropriate content based on the abbreviation you entered. Emmet is very mature and very suitable for writing HTML / XML and CSS code development tool, but can also be used in programming languages.

Example of use:
input abbreviation code in the editor: ul> li * 5, and then press the expansion key (default tab), to get the code fragment:

Unfortunately, I spent so long Sublime Text editor, even to this day only to find that God Emmet plug. Here to tell you about sublime text in Emmet installation method:

Step one: First you need to install Package Control sublime text components:

Press Ctrl + `to bring up the console sublime text of

Paste the following code in the end section and the transport command line: import urllib2, os; pf = 'Package Control.sublime-package'; ipp = sublime.installedpackagespath (); os.makedirs (ipp) if not os.path.exists (ipp ) else None; open (os.path.join (ipp, pf), 'wb') .write (urllib2.urlopen ( 'http://sublime.wbond.net/'+pf.replace (' ','% 20 ')). read ())

Restart Sublime Text
see package control in Perferences-> package settings, it means the installation was successful
Step 2: Using Package Control Emmet install plug-ins:

Press Ctrl + Shift + P command board
input install and select install Package, find and enter emmet Emmet Css Snippets, click can automatically complete the installation.
Use
emmet also very simple to use, as an example to sublime text, HTML or CSS directly enter an abbreviated code in the editor, and then press the tab key can be expanded to the full code snippet. (If there is a conflict with existing shortcuts, you can own it in the editor is set to expand to other key shortcuts)

Syntax:
offspring:>
Abbreviations: nav> ul> li

<NAV>
<ul>
<li> </ li>
</ ul>
</ NAV>
Brothers: +
abbreviation: div + p + bq

<div> </ div>
<P> </ P>
<blockquote> </ blockquote>
Up: ^
Abbreviations: div + div> p> span + em ^ bq

<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
缩写：div+div>p>span+em^^bq

<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
分组：()
缩写：div>(header>ul>li*2>a)+footer>p

<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
缩写：(div>dl>(dt+dd)*3)+footer>p

<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
乘法：*
缩写：ul>li*5

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
自增符号：$
缩写：ul>li.item$*5

<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
缩写：h$[title=item$]{Header $}*3

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
缩写：ul>li.item$$$*5

<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
缩写：ul>li.item$@-*5

<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
缩写：ul>li.item$@3*5

<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
ID和类属性
缩写：#header

<div id="header"></div>
缩写：.title

<div class="title"></div>
缩写：form#search.wide

<form id="search" class="wide"></form>
缩写：p.class1.class2.class3

<p class = "class1 class2 class3 "> </ p>
custom attribute
abbreviation: p [title = "Hello world "]

<p title="Hello world"></p>
缩写：td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td>
缩写：[a='value1' b="value2"]

<div a = "value1" b = "value2"> </ div>
Text: {}
Abbreviation: a {Click me}

<a href="">Click me</a>
缩写：p>{Click }+a{here}+{ to continue}

<p> Click <a href=""> here </a> to continue </ p>
implicit tagging
Abbreviation: .class

<div class="class"></div>
缩写：em>.class

<em><span class="class"></span></em>
缩写：ul>.class

<ul>
<li class="class"></li>
</ul>
缩写：table>.row>.col

<Table>
<TR class = "Row">
<TD class = "COL"> </ TD>
</ TR>
</ Table>
the HTML
all unknown abbreviations are converted into labels, e.g., foo → <foo> </ foo>

abbreviation:!

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>
缩写：a

<a href=""></a>
缩写：a:link

<a href="http://"></a>
缩写：a:mail

<a href="mailto:"></a>
缩写：abbr

<abbr title=""></abbr>
缩写：acronym

<acronym title=""></acronym>
缩写：base

<base href = "" />
Abbreviation: basefont

<basefont />
Abbreviations: br

<br />
abbreviation: frame

<frame />
Abbreviation: hr

<hr />
Abbreviation: bdo

<bdo dir=""></bdo>
缩写：bdo:r

<bdo dir = "rtl"> </ bdo>
Abbreviation: bdo: l

<bdo dir="ltr"></bdo>
缩写：col

<col />
Abbreviation: link

<img src="" alt="" />
缩写：iframe

<param name="" value="" />
缩写：map

<map name=""></map>
缩写：area

<area shape="" coords="" href="" alt="" />
缩写：area:d

<area shape="default" href="" alt="" />
缩写：area:c

<area shape="circle" coords="" href="" alt="" />
缩写：area:r

<area shape="rect" coords="" href="" alt="" />
缩写：area:p

<area shape="poly" coords="" href="" alt="" />
缩写：form

<form action=""></form>
缩写：form:get

<form action="" method="get"></form>
缩写：form:post

<form action="" method="post"></form>
缩写：label

<label for=""></label>
缩写：input

<input type="text" />
缩写：inp

<input type="text" name="" id="" />
缩写：input:hidden

别名：input[type=hidden name]

<input type="hidden" name="" />
缩写：input:h

Alias: input: hidden

<input type="hidden" name="" />
缩写：input:text, input:t

Alias: inp

<input type="text" name="" id="" />
缩写：input:search

Alias: inp [type = search]

<input type="search" name="" id="" />
缩写：input:email

Alias: inp [type = email]

<input type="email" name="" id="" />
缩写：input:url

Alias: inp [type = url]

<input type="url" name="" id="" />
缩写：input:password

Alias: inp [type = password]

<input type="password" name="" id="" />
缩写：input:p

Alias: input: password

<input type="password" name="" id="" />
缩写：input:datetime

Alias: inp [type = datetime]

<input type="datetime" name="" id="" />
缩写：input:date

Alias: inp [type = date]

<input type="date" name="" id="" />
缩写：input:datetime-local

Alias: inp [type = datetime-local]

<input type="datetime-local" name="" id="" />
缩写：input:month

Alias: inp [type = month]

<input type="month" name="" id="" />
缩写：input:week

Alias: inp [type = week]

<input type="week" name="" id="" />
缩写：input:time

Alias: inp [type = time]

<input type="time" name="" id="" />
缩写：input:number

Alias: inp [type = number]

<input type="number" name="" id="" />
缩写：input:color

Alias: inp [type = color]

<input type="color" name="" id="" />
缩写：input:checkbox

Alias: inp [type = checkbox]

<input type="checkbox" name="" id="" />
缩写：input:c

Alias: input: checkbox

<input type="checkbox" name="" id="" />
缩写：input:radio

Alias: inp [type = radio]

<input type="radio" name="" id="" />
缩写：input:r

Alias: input: radio

<input type="radio" name="" id="" />
缩写：input:range

Alias: inp [type = range]

<input type="range" name="" id="" />
缩写：input:file

Alias: inp [type = file]

<input type="file" name="" id="" />
缩写：input:f

Alias: input: file

<input type="file" name="" id="" />
缩写：input:submit

<input type="submit" value="" />
缩写：input:s

Alias: input: submit

<input type="submit" value="" />
缩写：input:image

<input type="image" src="" alt="" />
缩写：input:i

Alias: input: image

<input type="image" src="" alt="" />
缩写：input:button

<input type="button" value="" />
缩写：input:b

Alias: input: button

<input type="button" value="" />
缩写：isindex

<isindex />
Abbreviation: input: reset

别名：input:button[type=reset]

<input type="reset" value="" />
缩写：select

<select name="" id=""></select>
缩写：option

<option value=""></option>
缩写：textarea

<textarea name="" id="" cols="30" rows="10"></textarea>
缩写：menu:context

Alias: menu [type = context]>

<menu type="context"></menu>
缩写：menu:c

Alias: menu: context

<menu type="context"></menu>
缩写：menu:toolbar

Alias: menu [type = toolbar]>

<menu type="toolbar"></menu>
缩写：menu:t

Alias: menu: toolbar

<menu type="toolbar"></menu>
缩写：video

<video src = ""> < / video>
Abbreviation: audio

<audio src = ""> < / audio>
Abbreviation: html: xml

<html xmlns="http://www.w3.org/1999/xhtml"></html>
缩写：keygen

<keygen />
Abbreviation: command

<command />
Abbreviation: bq

Alias: blockquote

<blockquote></blockquote>
缩写：acr

Alias: acronym

<acronym title=""></acronym>
缩写：fig

Alias: figure

<figure> </ figure>
Abbreviation: figc

Alias: figcaption

<figcaption> </ figcaption>
Abbreviation: ifr

Alias: iframe

Alias: embed

Alias: object

Alias: source

<source> </ source>
Abbreviation: cap

Alias: caption

<caption> </ caption>
Abbreviation: colg

Alias: colgroup

<colgroup> </ colgroup>
Abbreviation: fst, fset

Alias: fieldset

<fieldset> </ fieldset>
Abbreviation: btn

Alias: button

<button></button>
缩写：btn:b

别名：button[type=button]

<button type="button"></button>
缩写：btn:r

Alias: button [type = reset]

<button type="reset"></button>
缩写：btn:s

Alias: button [type = submit]

----------------
Disclaimer: This article is the original article CSDN bloggers' H Small chi ", the follow CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source and link this statement.
Original link: https: //blog.csdn.net/xiaozhi_2016/article/details/52415897

Installation and use of sublime Text3 plug-in Emmet

Guess you like