RocketTheme Magazine

Sublime Text 2 is a new version of a very powerful editor that has primarily flown under the radar since 2008. Originally created for Windows, the new beta version is now also available for Mac and also Linux-based platforms. The version 2.0 is available in beta, but is very stable, and even the developer releases are extremely solid and updated almost daily. I propose that you should check out ST2 and consider it as your daily go-to editor. This article is intended to show off some of the great features of this modern and constantly evolving text editor.

sublimeinaction-image1

Below is a handful of the great features that sets Sublime Text 2 above other editors:

  • Mini-map overview graphic for ‘birds-eye-view’ of source
  • Powerful command palette to quick perform actions
  • Easy file loading with file switching panel
  • Multiple selection capability
  • Code-Folding
  • Indent Guides
  • Vintage mode for Vi key bindings
  • Powerful multi-pane/Split-pane editing
  • Regex-based find and replace
  • Support for Textmate themes
  • Powerful plugin architecture
  • Jump-to-function panel
  • Remembers files on re-open
  • Bracket matching
  • Fully customizable key bindings
  • Auto-complete and Snippets and Macros
  • Full-screen / Distraction-free editing

Needless to say that Sublime Text 2 is a feature-packed editor and makes it a worthy alternative to the other popular editors out there on each platform. As I use a mac, I will be using mac terminology in the information below, but most of the tips and tricks translate directly to the Windows and Linux versions.

Package Control

The first thing that you will want to do when you install Sublime Text 2 (ST2) is to install the great Package Control package manager by Will Bond.

Installation is easily done via the ST2 console, so just use the ctrl+` key combo to bring up the console panel, and paste in the following code and hit return:

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'

After this runs, you will need to restart ST2. Once restarted you can use the ⌘+shift+p key combo to launch the command palette and typing ‘package’ to bring up the various commands that are available.

package-mgr-image2

Soda Theme and Color Schemes

Themes

The default look of ST2 is functional and minimal but it’s not really stunning especially for mac users used to pretty apps such as Coda or Espresso. There’s a simple solution however, and that is to install the fantastic Soda Theme by Ian Hill. We can install it easily enough with Package Control.

Hit the ⌘+shift+p combo, and type “install”, to bring up the “Package Control: Install Package” option, then hit return. This will display a lit of available packages that Package Control knows about. Type “soda” to narrow down the options, then hit enter to install the “Theme - Soda” package.

To activate the theme, you will need to edit the User Settings file which is available via the menu: Sublime Text 2 → Preferences → Settings - User. Just replace the existing content with the following:

// Place user-specific overrides in this file, to ensure they're preserved
// when upgrading
{
"theme": "Soda Light.sublime-theme"
}

To use the ‘Light’ theme, or:

// Place user-specific overrides in this file, to ensure they're preserved
// when upgrading
{
"theme": "Soda Dark.sublime-theme"
}

To activate the ‘Dark’ theme.

Color Schemes

Themes change the UI elements, but not the actual text-editing area. That is controlled by the Color Schemes options available in the Preferences menu item. The default ‘Monokai’ color scheme works great with the ‘Dark’ Soda theme, although I prefer my own custom ‘Rhuk’ color scheme to give it that colorful and vibrant feel:

rhuk-in-action-image3 Download: Rhuk.tmTheme

If you prefer the ‘Light’ look and feel, then you may prefer to use something like the ‘IDLE’ color scheme that works great with Soda’s light variation:

idle-in-action-image4

If you really want to find that perfect color scheme you can install any of the TextMate themes available from numerous sources including MacroMates' own theme submissions area. You install these by dropping the color schemes folder. The easiest way to locate this folder is to use the Sublime Text 2 → Preferences → Browse Packages... menu option to open up the Packages folder, from there, just open the ‘Color Scheme - Default’ folder. You can then drop your .tmTheme files in here and restart ST2 for them to be available.

After the restart you can choose the color scheme you want to use my navigating to: Sublime Text 2 → Preferences → Color Scheme and selecting the color scheme you want to use.

Key Packages

At this point you could start using ST2 and be very happy with the results. However, I have found that there are some important packages that I simply can’t live without. You might as well install these and take advantage of them as it just improves the editing experience.

SublimeCodeIntel

Installation: ⌘+shift+p → “install” → ENTER → “codeintel” → ENTER → Restart ST2

This Code Intelligence package was ported from Open Komodo by German M. Bravo (Kronuz). It provides support for a wide variety of languages including PHP, HTML, HTML5, JavaScript, Node.js, Python, Ruby, and many others. It provides the following abilities:

  1. Jump to Symbol Definition so you can jump to the file and line of the defining symbol
  2. Imports Auto-Complete to provide auto-completion information in real-time.
  3. Function Call Tool-Tips which will display information in the status bar regarding the current function.

To use the “Jump to Symbol Definition” feature simple alt+click on any symbol in the source file and if you have a project loaded, it will even open the file and jump to the line that defines the symbol. This is a very powerful feature, and something you will not be able to live without once you are used to it.

The auto-completion automatically pops up when you start typing code.

codeintel-image5

Sublime Goto Documentation

Installation: ⌘+shift+p → “install” → ENTER → “goto” → ENTER

Goto Documentation is a simple package and as the name suggests allows you to quickly goto the relevant documentation for the function you have your cursor on. By default there is no key-binding for this, so you will have to add one. Click the Sublime Text 2 → Preferences → KeyBindings - User menu item to bring up the User KeyBindings file. Inside the square brackets ([]) enter the following binding:

{ "keys": ["ctrl+shift+h"], "command": "goto_documentation" }

After you have saved this file, the keybinding will be immediately available. Just open a PHP file and put the cursor on a PHP function, then hit the ctrl+shift+h combo and your default browser should launch and go right to the documentation for that function.

Alternatively you can activate Goto Documentation directly from the command palette: ⌘+shift+p

Bracket Highlighter

Installation: ⌘+shift+p → “install” → ENTER → “brackethigh” → ENTER

This package provides more obvious indicators that highlights the brackets (Curly, Round, and Square) when you are within the scope. You can configure this package and choose different colors and different gutter icons for each bracket type if you like. Full details are available in the link above.

NOTE: This can have performance implications on large files

brackets-image6

Sublime dpaste

Installation: ⌘+shift+p → “install” → ENTER → “dpaste” → ENTER

This is a very useful package for sharing code snippets among friends and co-workers. Just select some code in ST2 and hit ctrl+d to send that selection to the dpaste.com service. After you see the success message in the status bar, the URL of paste is available on your clipboard and available to paste where ever you like.

SublimeLinter

Installation: ⌘+shift+p → “install” → ENTER → “sublimelinter” → ENTER → Restart ST2

This package is an implementation on the popular “linters” or code validators for:

  • JavaScript
  • Objective-J
  • Perl
  • PHP
  • Python
  • Ruby

The benefit of this is that it will highlight any code that the linter deems to be invalid. This can really be a time saver as it will help you to identify simple typos and invalid code as you type. The invalid code will be automatically highlighted by the linter, and click on the area of invalid code will provide useful information in the status bar that can identify what you did incorrectly. This is a fantastic plugin for ST2 and it’s usefulness cannot be understated!

Sublime Prefixr

tInstallation: ⌘+shift+p → “install” → ENTER → “prefix” → ENTER

This new package takes advantage of Prefixr API that you can see in action at http://prefixr.com/. This service takes a CSS3 attribute such as border-radius:3px and returns all the prefixed variations for the various browsers that support this CSS attribute.

prefixr-image8

Some Useful Key Bindings

As you will have noticed, Sublime Text 2 is one of those editors that lends itself to binding actions to key combinations. This is the hallmark of a powerful editor and for professional developers, this is a must. Clicking icons is great for starting out, but as you become a more proficient and efficient programmer, you will not want to waste time taking your hands off the keys.

Below are a few useful key bindings that you will find very useful and will learn by heart before long. Click the Sublime Text 2 → Preferences → KeyBindings - User menu item to bring up the User KeyBindings file.

You probably already have the keybinding for the “Goto Documentation” functionality that we added before. Before this line, but still between the [ ] brackets add the following:

{ 
"keys"      :   ["alt+shift+t"], 
"command"   :   "insert_snippet",
"args": {
"contents": "<${1:p}>${0:$SELECTION}</${1}>"
}
},
{ "keys": ["super+ctrl+r"], "command": "settings_refresh" },
{ "keys": ["alt+ctrl+r"], "command": "refresh_folder_list" }

The first key binding of alt+shift+t allows you to wrap a selection in a tag. This is most useful when you want to quickly markup some HTML.

The second key binding of super+ctrl+t refreshes the settings of Sublime Text 2. This is particularly useful when developing your own custom Color Schemes.

The third keybinding of alt+ctrl+r refreshes the folder list. Sometimes ST2 doesn’t pick up file changes instantly and this key combination allows you force it to update.

Taking advantage of built-in functionality

Goto Anything

This very useful command let’s you go-to, well, anything! just type ⌘-p to bring up the Goto Anything panel:

  • Type part of a filename to find and open files. It uses a fuzzy search that is very fast and is instant-as-you-type
  • Type an @ and then the name of a symbol, # to search inside the current file, and : to jump to a line number

NOTE: you can use ⌘-r to launch the panel and pre-populate it with the @ symbol for jumping to symbols. ctrl-g launches the panel and pre-populates it with the : symbol for jumping to a line number

gotoanything-image9

Column/Multiple Selection

Another really powerful feature of ST2 that you really will find useful once you get used to it, is column and multiple selection.

Column Selection

You can activate column selection by using the middle mouse button to drag an area in ST2. This can be a rectangle or even just straight down to produce multiple vertical prompts. This allows you to quickly manipulate multiple lines that have data that lines up. This is a bit hard to explain, and even harder to screenshot, just try it!

Multiple Selection

Similar to column selection, you can hold down the command while clicking or selecting different selection areas to select multiple things at once. Any action or edit will effect all of these selection areas at the same time. This is really powerful and useful once you get the hang of it.

Split Screen

A great feature of ST2 is the ability to quickly split the screen to either have multiple views of the same file, or open multiple files in various window configuration. You can either configure these options via the View Layout menu item, or you can use the built-in hot-keys to quickly access the options via the keyboard. The various configurations are as follows:

  • Single ⌥ ⌘ 1 (1 single editing window)
  • Columns: 2 ⌥ ⌘ 2 (2 columns of editing windows)
  • Columns: 3 ⌥ ⌘ 3 (3 columns of editing windows)
  • Columns: 4 ⌥ ⌘ 4 (4 columns of editing windows)
  • Rows: 2 ⌥ ⇧⌘ 2 (2 rows of editing windows)
  • Rows: 3 ⌥ ⇧⌘ 3 (3 rows of editing windows)
  • Grid: 4 ⌥ ⌘5 (2 x 2 grid of editing windows)

You can easily drag open tabs between these editing windows, or click in a windows and then a file in the sidebar to open a file in the selected window. You can also open the same file in multiple editors by first ‘cloning’ the file via the File menu, then dragging this cloned file into one of the other editor windows.

splitscreen-image10

Change the Icon

This is purely cosmetic, but one of the few less-than-perfect things about ST2 is the icon. Yes it’s simple, yes it’s somewhat distinctive, but boy is it boring! Needless to say there has been a lively thread going on the ST2 forums for quite some time with some great community provided icons. It’s a fairly easy process to update your ST2 icon to one of these provided and instructions for that can be found in the thread.

icons-image11

Open in Sublime Text 2 Finder button

One of the most useful ways to use ST2 is to be able to launch it from the finder with it already containing all the files you want to work on. A great way of doing this on a Mac is to use a Finder button. The OpenInSublime finder button is a simple application that you just drag onto your Finder toolbar and it appears alongside the other toolbar buttons as if t were part of the toolbar functionality. To use the button, simple select a file, a group of files, or a folder in finder, and then click the OpenInSublime button you’ve previously dragged into your toolbar. This will then launch ST2, or if it’s already open, just create a new window. The sidebar will contain the appropriate files and effectively treats them as a temporary project. This allows you to quickly open a group of files and edit them without them being associated directly with the Sublime Text 2 application.

openinsublime-image12

Download: OpenInSublime.zip (for Mac OS X 10.7)

Install Command Line Utility

Another way to use ST2 to launch it from the terminal and use it as an editor just like you would with vi or pico. Although the editor does not come with a utility to set this up, it can be done very easily with a couple of commands. So bring up the terminal window and enter the following command:

sudo ln -s "/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl" /bin/subl

Once you’ve done this you will be able to use the subl terminal command to launch ST2 from the terminal. Here is an example of how you can pass arguments to control how the editor is launched.

megamac:~ $ subl --help
Sublime Text 2 Build 2138


Usage: subl [arguments] [files]         edit the given files
or: subl [arguments] [directories]   open the given directories
or: subl [arguments] -               edit stdin


Arguments:
--project 
: Load the given project
--command <command>: Run the given command
-n or --new-window:  Open a new window
-a or --add:         Add folders to the current window
-w or --wait:        Wait for the files to be closed before returning
-b or --background:  Don't activate the application
-s or --stay:        Keep the application activated after closing the file
-h or --help:        Show help (this message) and exit
-v or --version:     Show version and exit

About the Author:

Andy Miller

Andy Miller

Andy Miller is the CEO and Founder of RocketTheme. As a former core team member of Mambo, and one of the founders of Joomla, Andy has years of experience developing templates and extensions for open source platforms. RocketTheme is one of the preeminent providers of templates, themes, and styles for Joomla, WordPress, Drupal, phpBB3 and Magento.