By Petr Jiricka on Apr 29, 2013
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.
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.
For example, type the following text inside a HTML document in NetBeans:
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:
Note that the keyboard shortcut for all Emmet actions (including Expand Abbreviation) can be defined in IDE options - just go to Tools | Options | Keymap.
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.
For more information, check out also the official README for the NetBeans plugin at the Emmet website.