11 minutes

The Definitive Guide: Sublime Text, 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>.

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.

Online HTML Email Template Builder

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before. Try now for free!

Learn MoreOther Products

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.

1 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.

Posts by Christian Krammer

Earn 25% commission on affiliate sales

We build high-quality products

Designmodo offers advanced drag and drop website and email builders for web designers and developers, we have everything you need to make money.

Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree