Zen Coding – How to speed up your markup with Emmet

Rickard DahlstromResource, Tech Stuff, Web Development5 Comments

emmet

If you haven’t heard about Zen Coding or Emmet, you’ve probably been writing your markup in the dark. It’s time to put some light to your development workflow. Zen Coding and Emmet help you write your markup more quickly.

In 2008 Vadim Makeev started to write the open source project – Zen Coding, which allows you to transform CSS rules to HTML markup. This project later changed its name to Emmet.

zen coding emmet

We’ve all been writing markup that feels like it takes ages to write, a lot of tags, rules, classes, ids and text. It takes time and it is so frustrating when a closing tag doesn’t mach a start tag. To write markup character by character takes time. Having a good code-editor makes it much easier. Using Zen Coding makes it a dance.  So how does it work?

CSS roles to HTML markup

It’s beautiful in its structure and I will let this example demonstrate that.

This will result in a ul list with with 10 li tags. Each one with given class name.

Easy? Let’s look at one more…

You are probably now starting to get the Zen coding logic. It pretty much works the way we’re used to doing things with CSS.

  • A . will add a class to the element.
  • A # will add an id to the element.
  • A > will make the right element to a child of the left element.
  • A + will make the right element to a sibling to the left element.
  • A *[number] will loop the element [number] of times.

OMG Zen coding is MAGIC. I want the magic now.

First of all. Calm down, I know it’s exciting.

Zen coding / Emmet is well supported across many code editors since it’s written in Javascript and is easy to implement. Shortcuts are different for each plugin. For example, in Sublime you can put the cursor at the end of the line and hit ctrl+e to apply magic… after you have installed the plugin.
You can find a list of plugins for different text editors at emmet.io/download/.

I can’t find a plugin for my code-editor.

Note that this is NOT all of the existing plugins. Do a Google search and hopefully you will have better luck. According to Microsoft user statistics, there were more than 2 million developers using Visual Studio in the year 2014 – so here’s how to get started with the plugin for Visual Studio 2013.

These are the 4 steps you need to get your magic markup in Visual Studio Emmet 2013.

  1. Install
  2. Restart Visual Studio (After restart you should have a new tab in the top menu)
  3. Write your “css rules” e.g div.hello>div.world
  4. Hit ctr+1 or hit “expand abbreviation” under your new “Emmet” tab
  5. Enjoy your auto generated code.

If you have good tips of plugins that are not in the list please leave a comment.

So let’s dig deeper into the awesomeness

Emmet will expand everything between the start of the line to the cursor. So if you have the cursor in the middle of the line it will only expand from the beginning to the middle.

Let’s write some text…

Don’t we all love lorem ipsum but hate to implement it… Not anymore.

Lorem text can also be repeated within loops like…

The Syntax is still too long! If you think so you might be a bit too lazy, but fair enough. It’s still possible to do the syntax a bit shorter.

By default Emmet will define a div if no element is defined.

In some cases it can be a bit more intelligent as well.

We can use the CSS attribute brackets to apply attributes.

Quite quickly you will notice you get greedy and want more. You want to make a block as a sibling to another block. Yes, we’re talking about groups.

Evaluate math expression. Note that there will be another hot key for this action.

Auto increment of classes text or content. Note that each dollar sign represents one digit and will be increased for each iteration.

Summary

Emmet is probably the easiest and most powerful developer tool I know. It makes writing markup more fun, even a bit cool. I hope you found this article useful and that it brought some light to your coding. Who wants to code in the dark?

Before I say good bye. Let’s get crazy

This helps you build better software, but do you know how it performs when in the hands of your users? For that you might want to consider something like this.

Next level software intelligence across your entire stack.

5 Comments on “Zen Coding – How to speed up your markup with Emmet”

  1. Pingback: Emmet and CSS: The forgotten part - The Raygun Blog

  2. Pingback: Use Linters For Safer Coding With Less Javascript Errors

  3. Pingback: Javascript debugging tips – Education Centre

  4. Pingback: Debug JavaScript With These 14 Tips - The Raygun Blog

  5. Pingback: Speed up your markup with Zen Coding and Emmet. | Visual Studio

Leave a Reply

Your email address will not be published. Required fields are marked *