Adventures with Sublime and Emmet

Adventures with Sublime and Emmet

I have long wanted to use Sublime Text and had read a lot of good things about it. I am a loyal Notepad++ user myself and it had so far been my main editor and tool for coding. I took this course over at Tuts+ about Bootstrap as a crash course and the teacher was doing this fancy way of writing code almost instantly. It looked sort of familiar, like I’ve seen it in passing in some article online.

sublime-emmet1

sublime-emmet2

 

On further research, I have learned he was using Emmet – a plugin you can install in your editor that will allow you to write magic like the one above (formerly known as Zen Coding). It is available for popular editors that most developers use. The syntax is CSS-inspired so it won’t take long for you to get the flow of things.

 

Editors where you can use Emmet:

sublime-emmet3

I tried to install it in Notepad++  but kept getting an error with Python, unfortunately. I read reinstalling Python should do the trick but it didn’t work for me. I also tried installing manually. If you know something I can try, please let me know! Thanks.

sublime-emmet4

 

So, my stubborn, happy solution was to try it with another editor  and I already have Sublime 2 trial copy (Darn, I hope I can afford it soon…). The teacher was using Sublime as well anyway. I easily followed the instructions for installing Emmet with Sublime from their website, and now I’ve got Emmet!

Emmet for Sublime Text

 

To activate or “Expand Abbreviation”, simply type the code and click Tab:

sublime-emmet6

Quick rundown: .collapse.navbar-collapse#navbar-collapse>a.btn.btn-success

You don’t even need to type <div> to start your container. The above line translates to “create a <div> with class of collapse and navbar-collapse with an ID of navbar-collapse, then inside it set an anchor tag with a class of btn and btn-success”. (That’s Bootstrap code if you were wondering.)

Click Tab at the end of the line and boom – insta-cool code.

sublime-emmet7

The website provides awesome, helpful guides you can try for yourself. There are also a lot of YouTube demo videos, so get going now and happy coding!