Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Profile photo of Wanda Muriy
Nataliya Muriy
Marketing Content Creator - you name it, she'll write it!

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:

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:

emmet-at-work

  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.

emmetmenu

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). 

 

Related Posts

Live Preview for a Java EE project in MyEclipse Change, deploy, wait… don’t like it… start over!! This doesn’t have to be your developer’s life. With Live Preview of CodeLive you can know what’s going on immediately, as you code. It allows you to jump to source code from the browser, inspect it, instantly view changes and receive a preview on multiple browsers and gadgets. So there you are,...
Take a deep breath — Eclipse Oxygen is here! We can all breathe a little easier now that Eclipse Oxygen has arrived! And just like the last Eclipse release (remember Neon?), this is a biggie!83 projects287 committers71 million lines of code664 contributorsOur development team is ecstatic about all Oxygen has to offer. When Ignacio Moreno (our SDC Product Manager) was asked to give a favorite,...
MyEclipse 2017 Stable 1.0 is out! Earlier this year we were really excited about being able to provide you with initial support for Angular 2. Well, now with this release you also get tooling support for Angular 4. Not only that, but we wanted to make sure you were able to update simply to Angular 4 -- with a one-click flow that does most of the steps for you. Once you are all set,...
Eclipse Shortcuts for a Productive Workflow I hope this list of my favorite Eclipse shortcuts will help your workflow become more productive. The shortcuts are divided into the following areas: Navigation General Purpose Editing Java Editor Plug-in Development Workbench Navigation Switching between Open Editors Ctrl + E—Display a filterable list o...

Posted on Jul 27th 2017