What is Emmet
Back in 2009, Sergey Chikuyonok wrote an article to present a new way of writing HTML and CSS code. This revolutionary plugin, called Zen Coding, has helped many developers through the years and has now reached a new level.
Emmet, previously known as Zen Coding, is the most productive and time-saving text-editor plugin you will ever see. By instantly expanding simple abbreviations into complex code snippets, Emmet can turn you into a more productive developer.
So here is a brief intro to Emmet. Give it a try and believe me, you won’t regret it!
Installation in Netbeans
In NetBeans, open Tools > Plugins > Available plugins and find and install Emmet plugin.
When installed, check out Edit > Emmet menu item for available actions.
Keyboard shortcuts
By default, plugin has almost no shortcuts. To bind keyboard shortcuts to Emmet actions or change existing ones, go to Tools > Options > Keymap. For your convenience, all Emmet actions are grouped under Emmet categories.
HTML Abbreviations
Because Emmet’s syntax for describing elements is similar to CSS selectors, getting used to it is very easy.
Easily Add Classes, IDs, Text and Attributes
Type p.bar#foo and press CTRL+ALT+N to output this:
<p class="bar" id="foo"></p>
Curly brackets are used for content. So, h1{foo} will produce this:
<h1>foo</h1>
And square brackets are used for attributes. So, a[href=#] will generate this:
<a href="#"></a>
Nesting
By nesting abbreviations, you can build a whole page using just one line of code. The child operator, represented by >, allows you to nest elements. So p>span will output this:
<p><span></span></p>
The sibling operator, represented by +, lets you place elements near each other, on the same level. So h1+h2 will output this:
<h1></h1> <h2></h2>
Grouping
To effectively take advantage of nesting without turning them into a confusing mess of operators, you’ll need to group some pieces of code. It’s like math — you just need to use parentheses around certain pieces. For example, (.foo>h1)+(.bar>h2) will output this:
<div class="foo">
<h1></h1>
</div>
<div class="bar">
<h2></h2>
</div>
Implicit Tag Names
In many cases you can skip typing tag names and Emmet will substitute it for you. For example, instead of div.content you can simply write .content and expand it into <div></div>.
But Emmet is more intelligent. It looks at the parent tag name every time you expand the abbreviation with an implicit name. So, if you declare .item inside of a <ul>, it will generate <li></li> instead of <div></div>.
Here’s a list of all implicit tag names:
liforulandoltrfortable,tbody,theadandtfoottdfortroptionforselectandoptgroup
Multiplication
You can define how many times an element should be outputted by using the * operator. So, ul>li*3 will produce:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
CSS Abbreviations
Values
Emmet is about more than just HTML elements. You can inject values directly into CSS abbreviations, too. Let’s say you want to define a width. Type w100, and it will generate:
width: 100px;
!important modifier
You can add ! suffix at the end of any CSS abbreviation to get !important value. So m10! will output:
margin: 10px !important;
Actions
Emmet allows you to write large HTML code blocks at speed of light using well-known CSS selectors. But it’s not the only thing that every web-developer needs: occasionally you have to edit your HTML and CSS code to fix bugs and add new features.
Emmet offers very unique tools that can greatly improve your editing experience:
Expand Abbreviation
Yep, this is the action that expands CSS-like abbreviations into HTML code.
Toggle Comment
Toggles comment. Unlike basic editor’s implementations, matches HTML tag, CSS property or rule when there’s no selection.
Learning Resources
- Goodbye, Zen Coding. Hello, Emmet!
- For a list of all the available Emmet abbreviations, check out the Cheat Sheet.