Zen Coding Emmet in Notepad++ for Better and Quick Web Development

Emmet, formerly called Zen Coding, is a plugin tool for most of the popular text editors that greatly improves HTML & CSS coding efficiency and accuracy. It’s basically an essential toolkit for web developers who are, well, not using tools like Visual Studio.

As a coder in general, we all  know what a snippet is and we all have a chunk of them stored to boost our coding productivity. But Emmet takes this snippet idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation.

Well, what does exactly mean to a web developer? And why it’s so good? Let me show you a few examples. Since I am using Notepad++ as my main editor, I am going to show these examples using Notepad++.

Getting Notepad++ ready for Emmet

Open Notepad++, go to Plugins, and Plugin Manager. Check Emmet from the list, and click Install.

Emmet - Notepad++ install

Restart Notepad++, and you are ready.

How to use it

Type in Emmet’s very simple syntax, and go to Plugins menu, Emmet, and choose Expand or other command. Or you can use the quick keyboard shortcut like Ctrl + Alt + Enter.

Emmet - Notepad++ menu

Now let’s have some fun.

Type ! or html:5, and press Ctrl + Alt + Enter. Here is what you get:

Emmet - html 5

To ease the pain writing standard html tag line like a, div, .class, we can do

Type a and press Ctrl + Alt + Enter to have <a href=””></a> with the cursor flashing in the middle of two quotes.

Type .class and press Ctrl + Alt + Enter to have <div class=”class”></div>.

Type #id and press Ctrl + Alt + Enter to have <div id=”id”></div>.

Even better, you can use > operator to nest elements inside each other. For example:

Type div>ul>li and press Ctrl + Alt + Enter, you will get this, with the cursor flashing in the first li line.

Emmet - nesting elements

Want a comment line? Type C and press Ctrl + Alt + Enter.

To generator the dummy text “Lorem ipsum”, type lorem or ipsum, and press Ctrl + Alt + Enter. To repeat them in 5 times in paragraphs, type p*5>lorem and press Ctrl + Alt + Enter.

Emmet - dummy text lorem

Quite exciting, isn’t it? But we’ve only touched the surface of Emmet. We haven’t even mentioned how it works in CSS expanding. But I will let you to figure them all out. The documentation of Emmet is also well written, easy to understand and follow.

The samples shown in this post is done in Notepad++ but Emmet supports many others, pretty much all popular ones are covered, including Sublime Text, Vim, TextMate, Eclipse, Code, CodeMirror, etc., etc.

So, happy Zen coding.

Kent Chen

Microsoft MVP, IT Professional, Developer, Geek, and the co-founder of Next of Windows.

Last updated: 08/04/2014

Posted in: Tips & Tricks , Tools
Discover more: , , , ,

Leave a Reply

Notify of
avatar
Pali Madra
Guest

Thank you for the post.

I was wondering whether it is possible to configure or customize the keyboard shortcuts for Emmet in Notepad++? Of course I will check the documentation if there is no answer but I’m being lazy!!

Nykeri Grant
Guest

Yes there is In Npp (Settings > Shortcut Mapper > Plugin Commands > Search for shortcut and change it)

clod
Guest

I prefer Codelobster PHP Edition – http://www.codelobster.com
It has better support for Emmet

Paul Piket
Guest
Thanks for this post. I am halfway through an online course on HTML and CSS and installing the Emmet plugin has made coding so much simpler. Couple of points that might help others: 1) The keyboard shortcut CTRL-ALT-ENTER didn’t expand abbreviations on my version of Notepad++ (6.6.4), perhaps because this shortcut is already used to add a blank line above the current location. I changed the shortcut to CTRL-ALT-DOWN and now it works great (thanks for the info about using the shortcut mapper). 2) ‘c’ expands to a comment line in HTML if I use lowercase. Uppercase ‘C’ is treated… Read more »
michael
Guest

this doesn’t work at all for me. It says python won’t accept the script.

wpDiscuz