Trick Your TextMate: Snippets
Thursday April 27, 2006 / 4 CommentsIt’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.
Featured Stuff - Resources: Wireframes & Page Description Diagrames
Omnigraffle and Visio versions of the wireframe templates and stencils I use on all of my projects. There’s even a few examples included for good measure. More about Wireframe & Page Description Diagram Stencils and Templates
Let me be the first to say, Garrett, thank you very much for the timely addition to your tips series. It seems like our favorite editor is getting a lot of attention these days (thanks to Charilaos Skiadas I no longer need Excel), and it’s great to see folks support the growing community.
Thank you!
ClaytonHere’s a command I use to wrap all selected lines in LI tags:
perl -pe 's/.+/$&/'And here’s what my settings look like for that command. Bound to command-control-shift-L, it’s pretty handy.
I also like to read man pages in Textmate. Type the desired man page name on a blank line and run
man $TM_CURRENT_WORD | col <del>bto pull up a perfectly formatted document.Last, I use Textmate to manage my todo list (a plain text file) and fot adding new todo items, I enter the word item on a blank line and hit tab (tab trigger!) to run this:
`date +%m</del>%d` [ ] $1and then type the name of the todo, so my list ends up like this:04-18 [ ] Do some stuff and write a letter.
Joseph Wain04-22 [ ] Some other thing goes here.
04-27 [ ] Don’t forget to buy cookies!
I do like the snippets
Nathan BorrorGarrett, thanks for the great tutorials on TextMate. It is truly an awesome piece of software. I am loving the Markdown and Textile modes with preview and post to blog features.
One thing I learned was to put all my custom snippets in a separate bundle so that I can keep them from getting overridden when updating. Also, I use the @ symbol before my bundle name so that it’s always at the top of the list.
Lance WillettComments are closed for this entry.