Sublime Text 2 review, tutorial, plugins and full setup in just 15 minutes (Part 1)

by
on June 27, 2012

Sublime Text 2 is the best code editor that exists right now and I’ll show you why. In this article I am going to walk you through what this editor is and how to set it up quickly.

Why should I switch to Sublime Text 2?

There are many programmers like me who started learning how to code websites in Macromedia Dreamweaver or even HomeSite, not for any special reason but by that time (more than 10 years ago) it was simply the most popular decent editor you could find that had a complete set of features. And after using it for years I didn’t really feel like leaving my comfort zone, it was a hard decision because a code editor is something developers use 8 hours a day. It would mean a learning curve to getting used to the new editor which could take some time, something that we don’t usually have. In one of my former jobs they all coded with jEdit and it was a powerful software yet the fact of being run as a Java app wasn’t something I liked, it felt a tiny bit laggy and irresponsive. A few years ago I purchased Coda and after a while I had to go back to Dreamweaver’s features I couldn’t live without like a fully featured and integrated SFTP server, as-you-code typo correction, Regular Expression Find & Replace and some more. Since then I just went back to my old loved Dreamweaver and that would be it. A month ago I decided to have another every-so-often “Let me check if someone released something better?” and started finding a very huge amount of coders commenting about other code editors, a lot of these had very active communities too. So after debating between Sublime Text 2, TextMate and Espresso I decided to give Sublime a try. It has an unlimited free trial version with all the features so hey, why not just try it for a day and see if it is worth the change?… 30 minutes later I had everything customised looks, features and project/server setup. I had already started coding and completely amazed. Here’s a screenshot of Sublime with custom skins and code highlighter (more later). Dreamweaver coders will find this screenshot familiar:

Sublime Text 2 customised as Adobe Dreamweaver

Reasons to switch from Adobe Dreamweaver to Sublime Text 2

This article will show you why you and your team should switch now to Sublime, I’ll be comparing to Dreamweaver although this applies to other code editors as well. If you read to the end of the article you will have a fully configured Sublime ready to rock. These are just some of the reasons why you should spend 15 minutes today to set it up:

  1. Starts in 3 seconds compared to Dreamweaver which takes 30 seconds at least (that’s between 8 and 16 hours waiting every year you save)
  2. Sublime Text 2 only weights 27MB compared to the 376MB of Dreamweaver
  3. Uses much less RAM than Dreamweaver, brilliant for any computer
  4. No bugs, seriously. I’ve been using a Beta version for a full month now and it has never crashed or lagged or given any errors, eat that Dreamweaver
  5. The integrated FTP/SFTP client works extremely well and much much faster than Dreamweaver (details later)
  6. There are many powerful and very useful plugins as well as themes
  7. Incredibly easy to add/remove plugins and themes and also code your own (they’re like JavaScript/Python arrays)
  8. Working with different projects is a peace of mind, no complicated menues, couple clicks, super simple
  9. Sublime and project/server settings are saved as single files so they can be shared easily to other computers or members of the team
  10. You can close the whole app at any time, even when forgetting to Save all the open files and it will reopen with all the tabs including the unsaved files exactly as you left them
  11. The whole application is configured through plain files of simple JSON code, brilliant!
  12. You can preview all file’s code very easily without having to open them
  13. It only costs $59.00 (£37.73, 47.21 €) compared to the $399.00 of Dreamweaver and a license can be used in all your computers!

Reasons not to

  1. The sidebar can’t display file icons
  2. No WYSIWYG or CSS interface (although you don’t want it if you’re ever to become a serious developer)
  3. Two shortcuts to remember or note down (Cmd+P and Cmd+Shift+P)

Setting up Sublime Text 2 from scratch to awesome

We’ll separate this tutorial in 5 steps:

  1. The main software
  2. Plugins
  3. Themes
  4. Working with projects
  5. Useful Tricks

Installing Sublime

Sublime Text 2

Download Sublime Text 2 from the official site. It is free to test it for an unlimited time and includes all the features, it only costs $59.00 (£37.73, 47.21 €) once you are ready to buy it and you can use it in all your computers (license says it is “per-user” not “per-machine”).

Sublime Package Control

Next we are going to get some nice plugins, install Sublime Package Control which will allow us to install/uninstall all the plugins quickly.

Sublime Package Control installation guide website

Follow the instructions from the official Sublime Package Control website or if the website is down then copy this code:

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('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

Then go to Sublime and press Ctrl+` to open the console (in a Spanish keyboard use Ctrl+º), paste the code above and press Enter. Restart Sublime (it will load faster now than the first time you opened it).

Sublime Text 2 Plugins

Remember this: Cmd+Shift+P and press it.

This opens a list of all-the-actions you can do in Sublime (nice!). Start typing “Package Control: Install Package” and select it. I code in HTML5, CSS, JavaScript and PHP so the plugins below make perfect sense to my workflow. I also try to use the minimum amount of plugins. Google around to find some nice ones for you.

PhpDoc

Provides PHP documentation directly from inside Sublime.

SFTP

The FTP/SFTP plugin (not free but has a free unlimited fully-featured trial too) has native File Comparison which is great, with Dreamweaver you had to enable File Comparison through an external application. Also, Dreamweaver’s FTP is so slow… uploading every file takes ages: Connecting to Server… Waiting… Listing folder… Waiting… Checking file… Waiting… Uploading file… Done. Sublime SFTP plugin uploads files in 1 second: Sublime SFTP plugin uploading a file

SideBarEnhancements

Essential. It auto-selects the active file when changing tabs and displays a lot of useful actions when right-clicking a file or folder in the list:

Sublime SideBarEnhancements plugin

Goto Anything

Super-search inside Sublime. Press Cmd+P (Ctrl+P in Windows) and start typing a file name to search it through all the project.
Type : and a number to go to that line.
Type @ and a function/method/variable to go there.
Type # and anything to search it in the document.

SublimeCodeIntel

This plugin is amazing. Start typing something:

Typing in code at Sublime Text

And it will display every possible match, to select it press Enter:

Using SublimeCodeIntel

Bam! See how it fills in autocompletes and leaves everything ready for you to replace with your own? All done for you :) What’s also amazing is that it not just gives you PHP main functions but it searches through all the variables, functions, classes and methods you have in all the files of the current Project.

sublimelint

As-you-type code debugging:

Sublime Text 2 live debugging

ZenCoding

Essential if you work on a lot of HTML, read more here.

SyncedSideBar

Remembers expanded folders and highlights files in collapsed ones.

Continue to Part 2

This article got long! Read the second part for:

  • Theme and Color Highlighting setup
  • How to work with Projects
  • Useful Sublime tricks

Part 2 >>

What are you buying for Christmas? Here's a list of cool gift ideas.

Thank you for sharing the article

    
    

Xavi Esteve wrote this article on June 27, 2012 and published it in web design, front-end, javascript, php, tutorials, popular, english and work.

2 comments

Follow me for cool new products and interesting findings on graphic design, web development, marketing, startups, life and humor.

What to read next?

/*Twitter*/ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); /*Facebook*/ (function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=28624667607";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk')); /*Google+*/ window.___gcfg = {lang: 'en-GB'};(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();