Sublime Text 2 is the latest version of a very powerful editor that has primarily flown under the radar since 2008. Originally created for Windows, the newly released version 2 is now also available for Mac and also Linux-based platforms. I was for years a loyal Textmate user, but after years of neglect I began looking for a viable alternative. ST2, as it is known by its fans, is a worthy successor. Even after the Textmate 2.0 Alpha was released in December 2011, I see no reason to switch back. This article is intended to show off some of the great features of this modern and constantly evolving text editor.
NOTE: This article has been updated on 6/27/12 to reflect the release of Sublime Text 2 and some new packages.
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
- 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.
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:
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.
Soda Theme and Color Schemes
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:
To use the ‘Light’ theme, or:
To activate the ‘Dark’ theme.
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 the Twilight color scheme to give it that more professional feel:
If you prefer the ‘Light’ look and feel, then you may prefer to use something like this modified ‘Fluidvision’ color scheme that works great with Soda’s light variation:Download: Fluidvision.tmTheme
If you really want to find that perfect color scheme you can install any of the TextMate themes available from numerous sources including TextMateTheme.com and 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.
Choosing the font you prefer to code in is a profoundly personal choise. There are many resources such as Hivelogic's Top 10 Progamming Fonts, but my personal favorite and the one used for most of the screenshots in this article is Inconsolata set to size 14pt.
To set the font and font-size, you will need to edit the User Settings file which is available via the menu: Sublime Text 2 → Preferences → Settings - User. Just add the following lines between the curly brackets. Please make sure to append a comma at the end if you add another line below font_size:
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.
Installation: ⌘+shift+p → “install” → ENTER → “codeintel” → ENTER → Restart ST2
- Jump to Symbol Definition so you can jump to the file and line of the defining symbol
- Imports Auto-Complete to provide auto-completion information in real-time.
- 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.
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:
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
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
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.
Installation: ⌘+shift+p → “install” → ENTER → “sublimelinter” → ENTER → Restart ST2
This package is an implementation on the popular “linters” or code validators for:
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!
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.
tInstallation: ⌘+shift+p → “install” → ENTER → “sidebare” → ENTER
This great package provides several very useful enhancements to the Sublime Text 2 sidebar. It provides new options for deleting, opening, moving, new file creation, editing, finding and much more.
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:
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
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
Another really powerful feature of ST2 that you really will find useful once you get used to it, is column and multiple 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!
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.
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.
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.
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.
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:
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.
About the Author: