Trick Your TextMate: Snippets

It’s time for the second installment of Trick Your TextMate. We’re going to explore snippets and learn how you can create your own custom keyboard shortcuts and tab triggers to cut down on those superfluous keystrokes.

One of the features of TextMate that has me so addicted is the ability to easily extend it to meet my code-writing practices, and snippets are the easiest way to do that. Imagine if you could create a large block of commonly-used code with only a few keystrokes. Well, you can, and best of all, you can create any block of code that you use regularly, and assign it a keystroke or tab trigger.

Before we get started, make sure you’re running TextMate 1.5 or higher as that’s what I’m using. Go to “Window > Show Bundle Editor”. Detailed help for most of this is available right in Textmate, so I’m going to focus on generating awareness of what’s there, and you can learn the subtle details on your own time. Besides, the Textmate manual does a much better job of explaining the details.

Snippets

With snippets, you can quickly and easily insert pre-determined blocks of code into a page. While this is fine and dandy in and of itself, TextMate excels by making snippets much more powerful than just dumping some text out. We’ll start out with a simple example.

By typing docytpe and pressing the tab key, TextMate automatically offers up a quick select list of all your choices. You quickly select your desired doctype using the arrow keys, and voila. TextMate renders:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Now you don’t have to remember your doctypes, go search Google, or even pull up an old page to copy it into your new page. Textmate comes with plenty of snippets built in, but the real benefit is when you start writing your own. So now we’ll take a look at how you can create custom snippets with ease.

###Variables

Inserting static strings is fun and all, but what if we could create commands that used the selected text and wrapped them in some really cool markup? We’re in luck. Using the variable $TM_SELECTED_TEXT we can create snippets like…

<a href="index.html">$TM_SELECTED_TEXT</a>

…and tell the editor to wrap our selected text with our markup whenever we hit a certain keystroke combination. There are plenty of other variables at our disposal, but that’s probably the most useful one, so that’s where I’ll leave it.

Tab Stops

Of course there are times where you want to quickly insert a body of text that has multiple places you’d like to adjust. For instance, the following snippet…

<a href="$0">$1</a>

…let’s you type anchor (or whatever activation string you choose), press the tab key, and it automatically places the cursor at the respective $0 and $1 tab stops, and then tabs you to the end of the snippet. How’s that for fewer keystrokes?

Placeholders

Now, tab stops are great, but what if you use the same value for that tab stop most of the time, but don’t want to type it? Guess what! We have default values for tab stops, otherwise known as placeholders. So now you can use a snippet such as…

<table>
    <thead>
    <tr>
        <th>${5:Header}</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>${0:Data}</td>
    </tr>
    </tbody>
</table>

…and by typing table, not only are you automatically moved through the tab stops, but if you decide you’d rather leave the default value of Header or Data, you can just tab on through, and your default values of “Header” and “Data” will be there. While that’s not super practical, it’s a good illustration.

Mirrors

Mirrors let you insert a snippet and reuse whatever value you type in for multiple placeholders. For instance, imagine if you want to wrap a selected section of text in a strong tag. The following snippet…

<${1:p}>$TM_SELECTED_TEXT</${1/\s.*//}>

…would let you type p once and automatically update the closing tag to match. So with just a quick keypress or tab trigger, and only 1 keystroke, you’re good to go and…

Lorem ipsum.

…turns into…

Lorem ipsum.

Activation: Keystroke or Tab Trigger

Of course the key to all of these conveniences is to save keystrokes and enable you to work more efficiently. You have two options for determining how these snippets get activated. The first is by a keystroke that you define. This is usually a combination of the option, command, alt, and or shift keys along with one of the basic keys.

Your second option is to use tab triggers. With these, you simply define a string, and whenver you type that string and press tab, the code expands out and you’re set. I prefer this method because it feels more like a natural extension of typing.

Scope Selector & Context

Regardless of your activation method, one of the greatest features is the ability to control the scope of the snippets using scope selectors. This means you can have an activation string or keystroke behave one way in a CSS file and another in an HTML file.

Say for instance you want Option+C to always be your keystroke for wrapping a selection in comment tags. You could set up one snippet for HTML comments, one for CSS and JavaScript comments. Once you setup the scope selectors, Textmate is smart enough to know what type of file you’re editing and use the appropriate snippet for the job.

While I’m still digging into scope selectors, it’s clear that they’re a powerful addition. Instead of going into a long explanation here, I’ll simply advise you to dig into the documentation.

Summary

This is just one small aspect of Textmate’s capabilities. Snippets enable you to completely customize things to your liking and the way you work. While it comes pre-loaded with some snippets, it can take time to go through and add snippets that you use on a regular basis. However, it’s well worth the investment, and once you’re using them regularly, you’ll have a hard time living without them.