Faster Coding is a Reality — Emmet is at Your Service.

Update: Webclipse has now been transformed into CodeMix.

Being able to see what your app will look like without having to redeploy first is a great thing, thanks to our CodeLive. Want another reason for using Webclipse, our Eclipse plug-in? There are plenty more, actually, but let’s talk about Emmet here.

Ready for much higher speed when coding and editing with (X)HTML, CSS, XML, XSL or JSP? Emmet is your guy: he gets the job done with amazing transformations of abbreviations — they are turned into blocks of structured code, and he also allows you to better navigate and select your code. How is that possible? Emmet is a set of tools with a “powerful abbreviation engine”, as explained on Github, which lets you expand expressions into HTML code, much like CSS selectors. To quote their example:

`div#page>div.logo+ul#navigation>li*5>a` 

can be turned into:

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

In the case of CSS, here is one example of code expansion:

` bd:n expands to border: none` 

So how do you go about getting this done?  To expand your code, just follow this series of steps or watch the tutorial here:

1. Type in a CSS-like abbreviation.
2. Run “Expand Abbreviation” (CTRL + ALT + ENTER) to expand to HTML.
3. Go from one important point of code to another by choosing “Next Edit Point” or “Previous Edit Point”.
4. Choose your tags with Balance action (CTRL + 0).
5. Select important parts with “Select Next Item” (CTRL + ALT + .) and “Select Previous Item” (CTRL + ALT + ,).
6. Comment a full tag in an instant with Toggle comment (CTRL + ALT + /).

One more advantage is that when such expanded code is generated, tabstops are included. The result? You can peruse your code with your tab key! Besides, more commands are available: number increase/decrease, tag removal, liner merger, item selection, and toggle comment, among others. Look here for a complete list.

So how do you get all this goodness to work? Simple! In your Webclipse editor, select Emmet with a right click and then select Emmet Command. A keyboard shortcut assigned to that command can also be used. You have the power to modify your keyboard shortcuts by editing key bindings — just go to Window>Preferences>General> Keys. For further assistance, you can make use of the integrated cheat sheet simply by choosing Emmet>Emmet Cheat Sheet.

If you haven’t used Emmet yet, today might be a good day to start, whether you opt for it as part of our Webclipse (Eclipse plug-in) or MyEclipse (full-stack IDE).