Emmet plugin for NetBeans 7.3

Emmet is an amazing tool that greatly improves the coding productivity for web applications. It is well known among web developers, and in fact, many NetBeans users have requested support for Emmet in NetBeans. The good news is that thanks to Sergey Chikuyonok, the creator of Emmet, and Lorenzo Stanco, the author of the original Zen Coding plugin, the Emmet plugin is now available on the Update Center for NetBeans IDE 7.3 (as well as 7.2). Let's see how it works.

First, we need to install the plugin. In your NetBeans IDE 7.3, choose Tools | Options in the main menu, and select Available Plugins

Installing the Emmet plugin in NetBeans 7.3

In the Search field, type Emmet, and the plugin will be found. Check the Install checkbox, press the Install button, and follow the plugin installation wizard. At the end of the wizard, you will be prompted to restart the IDE.

Once the plugin is installed, you will notice that there is a new Emmet submenu in the IDE's Edit menu, which gives you access to all the great features of Emmet. In addition to this, the most important Emmet actions have keyboard shortcuts, so you will not need to use mouse to activate them.

Main Emmet menu in NetBeans IDE

For example, type the following text inside a HTML document in NetBeans: #page>div.logo+ul#navigation>li*5>a{Item $}.

Emmet abbreviation

 When you now press Ctrl-Alt-N (or Ctrl-Cmd-N on Mac), the magic will happen, and this text will be expanded to 10 lines of HTML code, that would be pretty tedious to type manually:

Code generated by expanding an Emmet abbreviation

Note that the keyboard shortcut for all Emmet actions (including Expand Abbreviation) can be defined in IDE options - just go to Tools | Options | Keymap.

Configuring Emmet keyboard shortcuts

This screenshot also illustrates that beyond expanding abbreviations as shown in the example above, Emmet offers numerous other features and actions, that are worth exploring. Additionally, Emmet supports extensions that further enhance its functionality. Extensions can be set up in NetBeans using Tools | Options | Miscellaneous | Emmet, so IDE users can take advantage of them.

Emmet extensions configuration in NetBeans

For more information, check out also the official README for the NetBeans plugin at the Emmet website. 

Comments:

Very nice. Thanks for the post and thanks to the people responsible for the plugin.

Posted by guest on May 28, 2013 at 02:58 AM PDT #

Here I have an update list, with 110 plugins available and Emmet isn't in the list. Any ideas why? I have 3 centers registered: 'Certified Plugins, NetBeans Dist., Plugin Portal'.

In Emmet repo I don't have the .nbm file. How can I install it?

Posted by Rafael Santos Sá on June 28, 2013 at 12:31 PM PDT #

Which version of NetBeans are you using? I can see it from NetBeans 7.3.1. You may want to press Check for Updates to refresh the plugins. If that does not work, the plugin can be downloaded here:
http://plugins.netbeans.org/plugin/48315/emmet

Posted by Petr Jiricka on June 30, 2013 at 11:42 PM PDT #

This plugin doesn't work for my environment(Win7[64bit], lang:Jp, Netbeans7.3.1)

Posted by guest on July 15, 2013 at 10:34 AM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed
About

This is the blog of the NetBeans client-side web team, which develops the support for HTML5 applications in the NetBeans IDE.

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today