How did I install Zen-Coding in Eclipse?

As I have started creating an AngularJS-ExpressJS-NodeJS-Redis-Couchbase project, I like to utilize the power of Zen Coding1 in Eclipse.

Zen Coding allows for quicker development of HTML, XML, CSS files using custom abbreviations instead of writing all the tags. For example, the below snippet would result in a well formatted basic HTML 5 document structure to be created in your editor.

html:5

Output:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

On similar lines:

header+(div#container>div#sidebar+div#content>div#row>div#col-md-6+div#col-md-6)+footer

Would result in:

<header></header>
<div id="container">
    <div id="sidebar"></div>
    <div id="content">
        <div id="row">
            <div id="col-md-6"></div>
            <div id="col-md-6"></div>
        </div>
    </div>
</div>
<footer></footer>

Zen-Coding has been renamed as by its author – Sergey Chikuyonok2 as Emmet3 and can be downloaded form the github location https://github.com/emmetio/emmet.

Tutsplus has a good video tutorial on Zen-Coding4, which is worth a watch. Its about 5 minutes in length.

A quick review of the excellent Emmet documentation5 would provide a better insight into the substantial benefits of using Zen-Coding.

Zen-Coding plugin is available for many offline text editors that can be installed in your machine.

Many of the online services such as JSFiddle adn JS Bin also have support for Zen-Coding facility.

To install Zen-Coding (Emmet) in Eclipse, I tried downloading it from Eclipse-Marketplace – and it failed.

The below approch worked for me:
– Open Install New Software... within the Help menu in Eclipse IDE.
– Paste: http://emmet.io/eclipse/updates/ within the text-box after Work with: label.
– Wait for Eclipes to download the available software information and select Emmet from the displayed list.
– Click the Next button and follow the screens. Finally restart Eclipse for the changes to take effect.


References:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s