Achieve Unmatched Productivity with Emmet.io

Achieve Unmatched Productivity with Emmet.io

Are you writing your code fast? It is possible to write it faster. Much more faster. Learn how in this post

Source code completion is one of the most powerful features of any modern IDE. It allows you to use long names for your variables and functions. Now you don’t need to type the full long name. It is enough to type two or three first symbols, press some shortcut, and your IDE will show you the list of matched choices for your input. We believe that source code become better with this great feature.

The most of developers generally stay at this point and are not looking for a way to improve their performance even more. It seems that source code completion is a silver bullet and there is no way to add here something else.

Fortunately, there are some other exciting tools which can make you to say “Wow, that’s awesome!”. And Emmet.io. is one of them. Let’s take a closer look at this tool and its capabilities.

What Emmet.io is

Emmet allows you to write your HTML/CSS code with the help of smart abbreviations. For HTML coding you can use CSS-like abbreviations with a small changes which are necessary to make code generation even more powerful. Take a look at the next basic sample:

Emmet.io Sample
Emmet.io Sample

This quick demo should give you an idea about abbreviations which are the heart of Emmet. It is definitely worth to spend a couple of minutes and review an Abbreviations Syntax Guide. Now, we want to go ahead and introduce you some other useful features.

CSS Abbreviations

Fortunately, abbreviations are available not for HTML only. Emmet can help you to write your CSS faster as well. Let’s take a look at the next features:

Value Aliases

Emmet allows you to use aliases for commonly used attributes and values. For example,

  • p → %
  • e → em
  • w100p → width: 100%
  • m10p30e → margin: 10% 30em

Color Values

With Emmet you can type colors faster:

  • #1 → #111111
  • #e0 → #e0e0e0

Together with value aliases you can do something like this:

  • c#3 → color: #333

!important modifier

Just add ! suffix at the end of any CSS abbreviation to get !important value at the end of line. p10p! will produce: padding: 10% !important;

Actions

Expand Abbreviation is just one of many available actions in Emmet. There is a short list of most useful of them:

  • Match Tag Pair – selects content, and/or opening and closing HTML tag name from current caret position
  • Go to Matching Pair – quickly traverses between opening and closing HTML tag
  • Wrap with Abbreviation – same as “Expand Abbreviation” action but intelligently wraps selected content
  • Toggle Comment – toggles comment
  • Encode/Decode Image to data:URL – encodes image under the current caret position to data:URL format and vice versa

You can find more information about the existing actions at the documentation.

Conclusion

It is definitely worth to spend some time on exploration Emmet.io capabilities and get incredible boost of your performance. The most important fact is that you can use Emmet not with CodeHighlight extension only. A lot of popular development tools already support Emmet integration as standalone plugin.

Found this article helpful? Follow us with Disqus how? or FeedBurner.

Press to share your feedback