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

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest Post

  • 8 things you need to think about for work-life balance
    View on Youtube Image: juliezhuo.com who works as a design VP for Facebook, presented 8 ways for work and life balance in her article “The
  • 10 special abilities of Smartphone
    View on Youtube No matter where you go or what you do, your smartphone is always with us. We use the internet with a smartphone,
  • Java: abstract class, abstract method
    An abstract class in Java is a class that declares an abstract function to be implemented in a subclass as an abstract method. An abstract
  • Java: inheritance and constructors
    When an object is created from an inherited class, the constructor of the superclass is performed before the constructor of the subclass. That is, when
  • Java reserved words: super, final
    super is a Java reserved word that is used to access member variables or methods of a superclass that is obscured by a subclass. Access
  • Java: finalize method and garbage collection
    The Java Virtual Machine(JVM) automatically performs garbage collection for objects that are no longer needed for efficient system operation. At this point, the JVM calls
  • Java: Method overloading
    Method overloading is the same concept as constructor overloading. That is, you can use methods of the same name in the same class, but methods
  • Java final variable
    You can specify an end variable using the reserved word final. The final variable represents a constant value that can not be changed. Typically, final
  • Java class variables
    Class variables are declared with static and have the concept of global variables. Class variables are used for the following purposes. Object references and object
  • Member variables in Java
    Java’s member variables are all declared outside the methods in the class and represent the properties that the object can have. Member variables consist of