The Definitive Guide: Sublime Text 2, a Code Editor to Love

Customization

Like you can see Sublime Text 2 is very well-provided even in its basic form. But to unleash all of its potential it can be heavily customized. The first thing you want to change may be the color scheme, since the default one offers light text on a dark background which surely isn’t to everybody’s liking. There are already more than 20 schemes pre-installed to choose from, but thanks to the compatibility to TextMate many more are available to download. The theme I use (which can be seen at the screenshots) is called LAZY.

Package Control

The next step you clearly have to perform is to install Package Control. That’s a package manager which enables to browse through and install dozens of different plugins, which then automatically keep up-to-date. To install it go to this site, copy the highlighted command to the console (open it with Ctrl + ` / Control + ` respectively View > Show Console) and hit Enter. After the installation completes, Package Control can be accessed via the Command Palette (Ctrl + Shift + P / Command + Shift + P). Enter “package” and all the available options with the prefix “Package Control” are shown. First you will of course want to select “Install Package” which shows a list of all available plugins.

Package Control All the available options of Package Control.

The first one should definitely be “SideBarEnhancements”, which transforms the Sidebar into a fully-fledged file manager to rename, delete or open files (in another application), to name a few. It also gives you the option to copy the path of a file or to set-up a list of browsers to choose from for opening the document.

Zen Coding

The next plugin you should definitely get is Zen Coding. You may have heard about it and never cared much (like me), but now that I know about it I never want to miss it again. Basically it’s an extension of Sublime Text 2’s built-in auto-complete engine and works the same way, but extends it to allow speed coding.

An example: To get an unordered list with five list items containing a link and a class (items) each, just type: ul>li*5>a[class=items] and hit Tab. If you keep hitting Tab afterwards it is possible to jump through the different href attributes of the links and their content. First it takes getting used to, but as soon as you have the hang of it, the time to markup certain elements (or a whole document) improves drastically. No more copying and pasting. Zen Coding can even be used to wrap tags. Select one, hit Ctrl + Alt + Enter (Command + Option + Enter), type the tag and press Enter. For more information about this great technique read the article over at Smashing Magazine. But things get even better. Entering ul+ or table+ gives you an unorded list with one <li> respectively a table with one <tr> and <td>.

Best Designed WordPress and Bootstrap Themes

Designmodo Shop

Zen Coding Using Zen Coding to insert the tag sequence described above.

More helpful packages:

  • LESS and SASS: If you are into these pre-processors, there is also something included for you. For both the Package Control has a package available to highlighting the syntax, for the latter even a build system can be installed to compile the LESS file into CSS.
  • HtmlTidy: The well-known tool to tidy, clean and prettify your HTML code.
  • Can I use: You may have heard of the website caniuse.com, which provides compatibly info for almost every CSS3 property and HTML5 feature out there. This plugin may only support the former, but it’s nevertheless quite handy if you just have to mark a property, press a predefined key and you get the desired info about it.
  • jQuery: This package helps, like the name suggests, with jQuery functions.
  • Prefixr: Tired of adding all the vendor prefixes for the hot, new CSS3 properties? Well, let this package help you. Select the property, hit a certain key and all the prefixes are added for you.
  • SFTP: Seems like there is nothing Sublime Text 2 can’t do. With this plugin the programme even becomes capable of transferring files onto a server.
  • Git: Integrates a bunch of git commands into the editor.

All of this packages – along with some info – and dozens more can be found here.

Settings and keys

If you are accustomed to the cozy settings dialogs of other editors where it’s possible to change all the preferences, I have to disappoint. Sublime Text 2 is a little different: Everything that you want to adapt takes place in a simple JSON encode file. File sizes, indentation type, tab sizes, the preferred theme, scroll speed and so on. Although these settings can be changed directly within these files I advise you to implement them into the corresponding user file. This way you can simply go back to the original preferences and can’t mess up anything. To do so choose Preferences > Settings - User. The same goes for the key bindings. Every single of it, like the ones in this article, can be changed to suit your needs.

To get an impression of the complexity of the possible key combinations in Sublime Text 2: the referring text file is over 600 lines long. Like above changes should only be made in the corresponding user file, which can be opened at Preferences > Keys Bindings - User. The default key bindings (Preferences > Keys Bindings - Default) are also a good place to discover new key combinations since everything is pretty self-explanatory. If you want to know all about them visit the Sublime Text help page.

Key Bindings A look into the default key bindings.

Snippets

The last thing and at the same time by far my favorite feature of Sublime Text 2 are the so called snippets: little portions of code stored within individual files. They can either be inserted through auto-completition or assigned to keys at will. I already have over 30 snippets created and they are getting more day-to-day. For the most part I use them to quickly insert frequently used CSS properties or to add the base frame of a new HTML document. The possibilities are indefinite.

Snippets not only allow you to define the position of the cursor when inserting but also to cycle through different positions (like attributes) by pressing tab or to use placeholders. I totally adore them. Apart from that the complex macros are also possible. To add a new one go to Tools > New Snippet. Although the system is pretty self-explanatory, a good overview can be found at Sublime Text help page.

Snippet A snippet to quickly insert a CSS block. $0 marks the position of the cursor.

Get it! Now!

Like you have seen Sublime Text 2 is a very powerful editor, but at the same time very simple to use. The programme can be heavily customized and totally tailored to completely suit your needs. It may take some time until you have the tool where you want it to be but the investment of time is totally worth it.

With a price tag of only $59, – it shouldn’t be too hard to make the decision and apart from that it can be evaluated as long as required. I’ve never regretted to move over from Homesite and I bet you will feel the same. No, I’m not a marketing guy from the creators of Sublime Text 2 and I don’t want to sell it to you, but I totally love the editor and it made my web-designer’s life a whole lot easier.

Page 1 Page 2
Christian Krammer

Christian Krammer is web designer at one of Austria's biggest Newspaper called "Kleine Zeitung" where he works for over ten years. He also is the proud owner of css3files.com, a comprehensive guide about CSS3. A large range of properties is explained there for you to learn and look up. Besides that he is married, the proud father of a 5 years old boy and passionate about movies and videogames.

Newsletter

20 Comments
  1. Valeriu May 1, 2:59 pm

    Great article Christian. I’ve been using ST2 for almost a year and I’s the most complete and powerful editor I’ve ever used.

    Reply
    +2
  2. William May 1, 6:12 pm

    Reading your article gave me the itch to try this editor. I’ve used a few, but never found one that I was really set on. I’ll take a look and hope it works as well for me as it has for you.

    Reply
    +1
  3. Vasi May 2, 12:17 am

    Update: Writing div.error for example gets you .

    Reply
    0
  4. Saya May 2, 3:39 am

    I didn’t know about it and downloaded the free version first

    Reply
    0
  5. john May 2, 5:21 am

    The Bad: :
    Auto complete/ intellisense — horrid
    The find in file (crtrl f) — sub par.
    Code folding — bad
    Bracket highlighter – bad
    Multi-syntax support – horrid (open some JavaScript inside a php file lol)

    Pretty much everything besides the mini-map, multi-select, and sheer crispy speed is done better , it’s a decent text editor don’t get me wrong, but an ide, not even close.

    Reply
    0
    • Valeriu May 2, 2:43 pm

      It’s still beta, is normal to have bugs.

      Reply
      0
    • at Oct 22, 8:04 am

      ctrl f? sub par? it allows you to search by regex! and you can do some amazing stuff with ctrl+d, ctrl+shift+l, etc. — its multiselection is quite powerful.

      Reply
      0
  6. Vadim May 2, 11:55 am

    Preview files without opening – it’s great!

    Reply
    0
  7. Bradley May 2, 3:22 pm

    Just started using Sublime 2 so this good timing to add a few extra add ons. Thanks

    Reply
    0
  8. Nelson May 4, 12:05 pm

    Things I like on sublime text 2:

    – Opens faster than my current editor (Komodo Edit)
    – Smooth scroll
    – Nice UI

    Things I don’t like:

    – No file / ftp explorer (serious backdown)
    – Doesn’t run on a single instance (Windows)
    – Every configuration setting is in a text file (horrible imo)
    – Paid-to-use beta

    Reply
    0
    • Christian Krammer May 7, 3:48 pm

      - No file / ftp explorer (serious backdown)
      The package “SideBarEnhancements” from Package Control gives you a fully-fledged file explorer.

      – Doesn’t run on a single instance (Windows)
      That Sublime Text 2 runs a single instance for every window is an advantage for me, so that I can easily switch between the windows in den taskbar.

      – Every configuration setting is in a text file (horrible imo)
      Yes, that every configuration needs to be done in a txt file is a bit inconvenient, but as soon as you have tailored it to your needs you presumably won`t need it anymore.

      – Paid-to-use beta
      Well, so far I didn’t notice that Sublime text 2 is actually a beta. Everything runs smooth and perfect for me. But that’s a point, right.

      Reply
      0
    • Sridhar Aug 28, 8:48 am

      “- Doesn’t run on a single instance (Windows)”

      Add

      “open_files_in_new_window”: false,

      in your user prefs file.

      Reply
      0
  9. cythux May 6, 9:17 pm

    http://www.sublimetext.com/dev is a higher Version and i like it to, when i use it not – I use Aptana Studio 3

    Very nice to is the plugin yui-compressor for compress js and css files

    Reply
    0
  10. david Aug 20, 4:16 pm

    Very useful article, thanks for sharing :) gotta say i loved it (st2) from the start, it’s really cool.

    Reply
    0
  11. saurabh Aug 22, 4:13 pm

    NIce article but it’s not clearly written which can be understood by newbie.

    Reply
    0
  12. n@ser Oct 2, 1:26 am

    Very useful article!

    I just install the pro version without any plugins yet and everything recommended works GREAT in mac!

    Thank You for your advice!

    Reply
    0
  13. danny Oct 13, 6:17 pm

    Hi, thanks for the article.
    I testing ST2 since one week now and i would like to buy it. Regrettably i was not able to find an Code-formatting-function like in Aptana Studio or Dreamweaver for example. Is there perhaps an extension for that?

    Reply
    0
  14. dave Dec 28, 2:15 am

    I love sublime text 2, best editor so far.

    Reply
    0
  15. Todd Dickerson Dec 28, 6:21 pm

    ZenCoding:
    ———

    This Zen Coding plugin is outdated and will never receive
    any updates in future. In two weeks the repo will be unpublished.

    Consider switching to Emmet — a re-branded Zen Coding project
    packed with new awesome features:

    Reply
    +1
  16. Gagan Janjua Jan 17, 1:35 am

    What is the color theme that you are using here ?

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters