Internubs internet marketing and general internet rubbish

12May/1013

How to: Setup Sublime Text for web development

UPDATE

I have written a new guide for Sublime Text 2. Get it here.

Sublime Text is a pretty decent looking text editor. Of course it's not just a text editor, but a very powerful tool for writing code.

sublime text ss

I have recently been using it for html, css and php. One of the many benefits of sublime text is the extensions. Depending on what you are using this diverse tool for, you can customise it to fit your needs. As I said, I've been using it for html, css and html, so I'm going to share two plugins I use to make it so much easier to use.

WebDevelopment

The first plugin I use is WebDevelopment. This is basically auto complete for html. You type ul then press tab and it makes <ul></ul>. You get the idea. Unlike other Sublime Text plugins, where you download a file, run it, and voila, in order to install WebDevelopment you have to subscribe to their version control system. This is a lot easier than it sounds.

First up you need to get TortoiseHg. Download it, install it. Done? Ok, now fire up your command prompt, either by doing start > run > cmd > enter, in XP, or start > cmd > enter in Vista and 7. Now you want to move to the directory where Sublime Text is installed. This is done by typing the following (assuming you installed Sublime into the default directory):

cd %APPDATA%\Sublime Text\Packages

now you want TortoiseHg to copy everything from their host to your computer. This is achieved with:

hg clone http://bitbucket.org/sublimator/webdevelopment/ WebDevelopment

Notice the space between the last slash and WebDevelopment. You should end up with this:

webdevelopment install

It is now installed. Restart Sublime Text and go have a play around.

Zen Coding

The second plugin I’m recommending it Zen Coding. This plugin is available for many, many other editors, from Notepad++ to Dreamweaver. What it allows you to do is use css like prompts to automatically generate code. The best way to demonstrate this is with the gifs they have on their wiki.

zencoding-nodeselect

zencoding-mnemonic

Pretty awesome huh?

Installing this plugin is much easier than the last. Go to their downloads page and download the Sublime Zen Coding Package. Inside the zip will be a readme and a Sublime Text Package file. Just double click the package file and it will automatically install. Again, restart Sublime Text and experiment

Shortlink for this post: http://0l.ly/3
Filed under: Uncategorized Leave a comment
Comments (13) Trackbacks (2)
  1. Great write-up! I have been searching for a good text editor for windows and finally found Sublime Text after what feels like years. These tools make it that much closer to being fully featured for writing markup.

  2. How do i use zen coding in Sublime? What are the keyboard shortcuts for it?
    I cant work it out :(

  3. Assuming it’s installed correctly you just press control+shift+enter and the box pops up at the bottom.

    On a side note WebDevelopment seems to have gone.

  4. Thanks for the well-written article. I recently discovered Sublime Text and was told that there’s a Zen Coding plugin. However, the Google page does not have Sublime listed. Has the Sublime plugin for Zen Coding been removed?

  5. bitbucket ask me for a password. What can I do ?

  6. Please update this tut, It doesn`t work! I can`t enter my password.

  7. Please update the URLs for the “webdevelopment” and “zencoding” pluggin…please..

  8. Yeah it’s a good editor but it still tends to be for Geeks – come on chaps it’s about time you added all these keyboard shortcuts so beloved by the Linux nuts to a toolbar or two?

  9. Hi all, just wanted to point out I have written a new guide on how to do all this for Sublime Text 2. See the beginning of the article for a link.

    Happy Coding!

  10. “Yeah it’s a good editor but it still tends to be for Geeks – come on chaps it’s about time you added all these keyboard shortcuts so beloved by the Linux nuts to a toolbar or two?”
    This is for coding. If your coding and cba to learn keyboard shortcuts, your doing it wrong.

  11. See the updated post

  12. Hey there, just wanted to drop by and let anyone who may be interested to know; I’ve made a plugin for Sublime Text 2 and 3 that allows you to edit posts, pages, custom post types, settings, and taxonomy terms for a WordPress site from within Sublime. You can also upload a media attachment and assign it as a featured image on a post or page.

    You can find out more here: http://dnstbr.me/labs/sublpress/

    I’m looking for feedback and comments on how it can be improved or how you can see yourself using it. Thanks! :D


Leave a Reply