Emmet plugin for Netbeans

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:

  • li for ul and ol
  • tr for table, tbody, thead and tfoot
  • td for tr
  • option for select and optgroup

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

Post A Comment

Anti-Spam Quiz: