Sublime 2 - 4 Pane Grid View

Sublime 2 Power Tools

This is a very advanced technical article.

For years, as a developer, I used the fantastic Textmate software for writing code. I got used to it. It’s a power editor for Mac OS X and has bundle support (think of bundles as extensions or plugins) that enhance the functionality of the software) for just about every technology, from Subversion to Git to a bunch of things I don’t use in a PHP environment like C/C++ mallloc (memory allocation), Python, Ruby, etc. It’s even got a WordPress bundle!

The problem with Textmate, however, is that active development is slow. Like, extremely slow. Like, molasses slow. After five years of using version 1.5x, an alpha version of 2.0 finally emerged last year. It’s still in alpha. Pace of development is still painfully slow, and what is in the 2.0 alpha version is not ground-breaking compared to what is in the current stable version.

Along came Sublime 2. This is, by far, my favorite text editor ever. I’ve been using it for about six months. It emulates virtually everything Textmate does. Textmate does snippets (think of them as macros). Sublime 2 also does snippets and supports the Textmate style. (Hint: If you’re a WordPress developer, my favorite – and still most commonly used – snippet comes from Mark Jaquith who wrote this snippet to create WordPress widgets on the fly. It works in both Textmate and Sublime 2).

The great thing about Sublime 2 is that it is truly a hacker’s paradise. All the config files are JSON objects, so if you can write JSON, you can configure Sublime 2. None of this namby pamby UI/click/select from dropdown bulldookie. Write your code and mean it. Related is that the master configuration file is extremely well documented and you can override everything in it, not by editing this file, but by providing new values in the user configuration file.

Ok, let’s back up and get y’all up to speed on what I do when configuring my Sublime 2 environment.

Config Files

First, I recommend you look at the entire Default configuration file. Read all the settings and comments and understand all the possibilities you have. Your most comfortable environment won’t be mine. For me, I see the following configuration settings that I’m going to want to override. Keep in mind, I never edit the default configuration file. It gets overwritten on upgrade.

To access this file, go to Preferences >  Settings – Default 1.

Note that I have included the related Sublime 2 default comments along with the settings I wish to override.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// While you can edit this file, it's best to put your changes in
// "User/Preferences.sublime-settings", which overrides the settings in here.
//
// Settings may also be placed in file type specific options files, for
// example, in Packages/Python/Python.sublime-settings for python files.
{
// Note that the font_face and font_size are overriden in the platform
// specific settings file, for example, "Preferences (Linux).sublime-settings".
// Because of this, setting them here will have no effect: you must set them
// in your User File Preferences.
"font_size": 10,

// OS X only: When files are opened from finder, or by dragging onto the
// dock icon, this controls if a new window is created or not.
"open_files_in_new_window": true,

// Characters that are considered to separate words
"word_separators": "./\\()\"':,.;-<>~!@#$%^&*|+=[]{}`~?",

// When drag_text is enabled, clicking on selected text will begin a
// drag-drop operation
"drag_text": true,
}

These settings and their related comments may seem self-explanatory, but in case they are not…

font_size: This setting controls the font size in the editor. Derp.

open_files_in_new_window: As a developer on an 11″ MacBook Air, I hate this setting. As the name suggests, everytime you open a file, it’s going to be in a separate window. This may be okay if you have a ton of screen real estate, but if you don’t… well, I like to have windows open up in a new tab of my editor so I can access them quickly and easily without consuming precious real estate.

word_separators: This is a list of characters that serve as word separators. I don’t mean code word separators. We’re talking about in the editor. I want to be able to click a CSS selector that often comes with a dash in the middle, and highlight/select the whole selector. By default, if there’s a hyphen, only the portion of the word clicked will be highlighted.

For instance, if a <div> has a class="foo", and I click on foo, foo will, by default, be selected. But if that div has a class="foo-bar", then clicking on foo will only highlight/select foo (up to the hyphen) and not all of the, more contextually accurate, ‘foo-bar’. In my user configuration file, I’m going to remove the hyphen, and thus remove this annoyance from my life.

drag_text: This is an edge case setting, but it has bitten me a few times. If you’re in a window in Sublime 2, and you have a block of code selected, when this default configuration is in play, you can drag that text into another window. I can see the use for this, but it’s also thrown me for a loop more times than it’s been useful. I override this to prevent that from happening. If I really want text in another window, I’ll jkust do the traditional copy and paste.

Overriding Defaults

Knowing I want to change these settings, I can write my own JSON object into my User configuration (Preferences > Settings – User):

1
2
3
4
5
6
{
"drag_text": false,
"font_size": 15.0,
"open_files_in_new_window": false,
"word_separators": "./\\()\"':,.;<>;~!@#$%^&*|+=[]{}`~?"
}

Easy Peasey!

Installing Packages

Where Textmate had Bundles, Sublime 2 has Packages. Packages are extremely powerful.

NOTE: Install this first 2. Trust me. And get familiar with this.

There are a million and one different packages out there, depending on what your needs are. Installing a package is as simple as going to Preferences > Package Manager > Install Package. Note that you can also add new external repositories of external packages that Sublime 2 can also search.

Sublime 2 - 4 Pane Grid View
Sublime 2 – 4 Pane Grid View

Summary

Sublime 2, of course, has hundreds of different setups. It kinda just depends on your taste and not being afraid to try things. Because everything is based on text file configurations and settings, everything can be reversed. Don’t be afraid to break things. You can always back out. You can even set it up so that you have multiple files open in the same tab. Set it up the way you want it and go be more productive!

Notes:

  1. Sublime 2 works on Mac OS X, Windows and Linux. All options will be similar, if not identical, to what I’m providing here from an OS X perspective. If you can’t find what I’m referring to, think about where logically it might be in your menus.
  2. Specific installation instructions can be found here.

Read More