Emmet(1): plug-ins that increase developer productivity

Emmet is a tool that dramatically improves coding productivity such as HTML and CSS. It can be installed as a plug-in to editors such as eclipse, vim, dreamweaver, editplus, and sublime text.

Emmet is very easy and features simple usage. If you write a short code in Emmet’s grammar and then press Tab or Enter, Template code defined in Emmet is automatically generated and fast coding is possible.(Eclips is Ctrl + E)

For developers who are familiar with CSS selectors, Emmet’s grammar is familiar, so you can easily apply it to your work. Related documents and Cheat Sheet are available on the following sites, respectively.

Emmet Docs

Emmet syntax and creation template

Emmet’s grammar is not difficult. You do not need to know all the grammar and you can experience a lot of productivity improvements if you learn only a few common grammars.

ID, CLASS

div#page.section.main
Syntax
<div id="page" class="section main"></div>
Result

Child Selection Properties

nav>ul>li
Syntax
<nav>
	<ul>
		<li></li>
	</ul>
</nav>
Result

Custom Properties

a[title="hello world"]
Syntax
<a title="hello world"></a>
Result

td[rowspan=2 colspan=3 title]
Syntax
<td rowspan="2" colspan="3" title=""></td>
Result

[a='value1' b="value2"]
Syntax
<div a="value1" b="value2"></div>
Result

Cloning an Element

span*3
Syntax
<span></span>
<span></span>
<span></span>
Result

Numbering

span.item$*3
Syntax
<span class="item1"></span>
<span class="item2"></span>
<span class="item3"></span>
Result

span.item$$$*3
Syntax
<span class="item001"></span>
<span class="item002"></span>
<span class="item003"></span>
Result

h$[title=item$]{Header $}*3
Syntax
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
Result

ul>li.item$@-*5
Syntax
<ul>
	<li class="item5"></li>
	<li class="item4"></li>
	<li class="item3"></li>
	<li class="item2"></li>
	<li class="item1"></li>
</ul>
Result

ul>li.item$@3*5
Syntax
<ul>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
	<li class="item6"></li>
	<li class="item7"></li>
</ul>
Result

Grouping

You can use parentheses to group them.

div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer
Syntax
<div id="page">
	<div id="header">
		<ul id="nav">
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</div>
	<div id="page">
		<h1><span></span></h1>
		<p></p>
		<p></p>
	</div>
	<div id="footer"></div>
</div>
Result

table>(colgroup>col*3)+(tbody>tr*5>td*3)
Syntax
<table>
	<colgroup>
		<col>
		<col>
		<col>
	</colgroup>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>
Result

Enter text

p>{click}
Syntax
<p>click</p>
Result

Nested

If you omit the tag name, the div is automatically created and the child tag is determined by the parent tag.

#page.section.main
Syntax
<div id="page" class="section main"></div>
Result

em>.class
Syntax
<em><span class></span></em>
Result

ul>.class
Syntax
<ul>
	<li class></li>
</ul>
Result

table>.row>.col
Syntax
<table>
	<tr class="row">
		<td class="col">`</td>
	</tr>
</table>
Result

Share This Post

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

Latest Post