Saturday, January 7, 2012

How to install Emmet (Zen Coding) in Sublime Text 2

Sublime Text 2 is an amazing text editor that provides plethora of great features. One thing, which I was very curious to see in Sublime Text 2 (ST2), was Zen Coding. I've spent hours and hours on finding a way to install Zen Coding in ST2 but didn't find any solution.

After searching for about 6 or 8 months, I've finally found a way and managed to install Zen Coding in my Sublime Text Editor. Here's how you can do it as well. Oh, by the way, I'm a Windows 7 (32-bit ) user.

Note: You need to install the Package Control, inside Sublime Text 2, if you want to follow the steps mentioned below. In case you don't know how to install it, here's a quick overview.

Access the Sublime Console by pressing the CTRL+ ` shortcut keys. Once opened, paste the following code/command into the console: 

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen(''+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation' 

Then press Enter to make this code do its work. It will load for some seconds and will give you a message (in the bottom left part of Sublime) that says something like "Package Control installed". And you're done with the Package Control installation.

  1. Open Sublime Text 2 and Press Shift + Ctrl + P (in Windows) and Shift + Cmd + P (for Mac). This will open the Command Palette inside Sublime (see the screenshot below). Alternatively, you can access the Command Palette by going to Tools > Command Palette.
  2. Command Palette inside Sublime Text 2
  3. Inside the Command Palette type Package install. You'll see an option that says Package Control: Install Package (see the screenshot below). Just Press Enter and wait until Sublime loads a list of Packages (it'll hardly take 3 to 4 seconds)
  4. Type Package Install inside the Command Palette and Press Enter
  5. After you press the Enter key, your Command Palette will disappear for some time and then it'll reappear with an extensive list of Packages. (see the screenshot below)
  6. A list of Packages is displayed inside the Command Palette
  7. Just type Zen Coding inside the Command Palette. And select the Zen Coding Package (see the screenshot below). It should be noted that at this moment, Zen Coding has been renamed to Emmet, so instead of searching for Zen Coding, try searching for Emmet in the Command Palette.
  8. It will load for sometime and finally give you a message that says something like Zen Coding has successfully been installed (this message will appear at the bottom left side of Sublime)
  9.  Now, to use Zen Coding, just Press Ctrl + Alt + Enter (for Windows)and Cmd + Option + Return (for Mac). A small window will appear at the bottom of the screen that says: Enter Koan:. Now just start typing inside this textbox and zen coding will be applied automatically to your code. As an example, refer to the screenshot below.
  10. Type your Zen Code inside the Enter Koan area

I've tried to explain the whole procedure in a very detailed and easy-to-follow fashion, but if you're still having difficulties, don't hesitate to ask me via the comments section. 

Till next time, bye