Essential TextMate Shortcuts, Tips and Techniques

Even after six years, TextMate is still considered by many to be the best code editor available for Mac. The reason why is simple: it’s incredibly powerful, and offers features that even the newest editors don’t yet offer. Add a robust plugin/bundle community on top of it, and you get one heck of a code editor.

I’ll show you some of my favorite shortcuts and tricks today.

1 – Vertically Select Text

Option + Drag

If you hold down the Option key, and drag the mouse, you’ll vertically select text. This can be particularly helpful when you need to update a block of text.

For example, let’s say we decide to remove the extra unnecessary var keywords from a bit of JavaScript? With vertical selection, this takes only a second.

2 – Alignment

 Option + Command + ]

Many developers prefer to line up the symbols within arrays and objects. For example, rather than…

var kimberly = 'valley girl',
    omg = 'oh my god!',
    bieber = 'my home boy';

…many prefer:

var kimberly = 'valley girl',
    omg      = 'oh my god!',
    bieber   = 'my home boy';

This certainly makes for more readable code. If you’ve been lining up the equal signs manually, TextMate automates the process. Place the cursor on one of the related lines, press Option + Command + ], and TextMate will take care of the rest.

3 – Incremental Search

Control + 

While the standard “popup” Command + f search functionality works, it’s decidedly slow. If you need to quickly search for a piece of text within the current page, use Control + s instead to perform incremental search.

A tiny textbox will pop up at the bottom of the screen. Once you’ve added your search query, press enter, and you’ll instantly be transported to the next occurrence of that sequence on the page. To continue searching, again, press Control + s and Control + Shift + s to continue forward and backward, respectively.

4 – Set Bookmarks

Command + F2 

One of my favorite features in Vim is the ability to create “bookmarks” in your projects. This then allows you to immediately return to that line of code with a simple keystroke.

TextMate offers this functionality as well. To star, or bookmark a line of code, place the cursor on that line, and type Command + F2.

To return to this line of code (for instance, after scrolling up the page to find a particular variable name), type F2. If you have multiple starred lines, each time you press F2, you’ll be taken to the next applicable location.

5 – Save Time with Macros

Option + Command + m

Let’s imagine that there’s a sequence of actions you find yourself performing often. For example, what if you find – like I have – that you frequently change the entire contents of an HTML tag. Vim offers the ever convenient, cit command (change inner tag).

If you have the Zen Coding bundle installed, you can type Command + D to achieve the same effect. However, if you find that you often forget this shortcut, you can always record macros that will repeat any sequence of events as many times as your require.

To begin a macro, type Option + Command + M; you’ll see a red recording circle in the lower right portion of the editor. At this point, TextMate is now listening to every action you perform. In our simple example, we only need to type Command + D (balance tag), and then Delete to remove the text.

To conclude your recording, type the same sequence again: Option + Command + M. You may now repeat this sequence whenever you wish by typing Shift + Command + M.

Note that, when you create a macro in this way, it’s meant to be a temporary solution. Once you create a new macro, or restart the editor, you will lose you recording. For a more permanent solution, you should following #6 in this list!

6 – Create Permanent Macros

Control + Command + m

More often than not, you’ll need to access a variety of macros each day. You can record permanent macros in the same way that you did in #5 of this list. Once finished recording, type Control + Command + M to save the macro.

Once you do, a dialog box will pop up, where you can then assign a custom activation key sequence for future retrieval.

I often find myself typing:

 
echo '<pre>'; 
print_r($variable); 
echo '</pre>';

Let’s create a custom macro to do the work for us. We begin by creating a macro, as outlined in #5. This macro will assume that our variable is stored within the clipboard. Type the snippet of code above manually as you normally would. When you get to print_r(), press Command + v to paste in the contents of the clipboard. Once finished, press Option + Command + m to conclude the macro.

Next, press Control + Command + m to save your macro; assign a tab trigger of debug, and you’re finished!

From now on, to print_r an array or object, simply copy the variable name to your clipboard, and type debug + TAB.

7 – Clipboard History

Control + Shift + Command + v

Many aren’t aware that TextMate has built-in clipboard history.

“By pressing ⌃⌥⌘V, you will see the list of all previous clippings and can pick the one you want to paste using arrow keys. Use return to insert it and escape to dismiss the list. If you dismiss the list, the currently selected clipping will be what gets pasted the next time you use the paste function.”

This is an incredibly useful feature that you’ll find yourself using constantly!

8 – Execute Shell Scripts

In addition to simple snippets, TextMate can also execute shell scripts. This means that all of the various web services are available for usage!

We’ll use my Prefixr service as an example. It allows you to automatically update a stylesheet to include the various prefix’ized versions of the new CSS3 properties. That way, you can code your stylesheets using the official W3C-recommended versions of each property, and Prefixr will fix in the missing pieces.

To hook into Prefixr’s HTTP-based API, create a new command in TextMate.

Control + Shift + Command + B

Next, add a new Command, and paste in the following shell script.

curl -sSd "css=$TM_SELECTED_TEXT" "http://prefixr.com/api/index.php"

This instructs TextMate to run a shell script that performs a curl request to Prefixr.com. In the querystring, it passes the contents of what the TextMate user has selected with his mouse. That content is automatically represented, via the $TM_SELECTED_TEXT environment variable.

Lastly, assign a keyboard shortcut to execute this command, and you’re done! To use it, select your entire stylesheet (or a single CSS3 property), and type the shortcut that you specified. Your code will immediately be updated accordingly.

/* Before... */
#content {
 border-radius: 5px;
 box-shadow: 30px;
}

/* After... */
#content {
 -webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

-webkit-box-shadow: 30px;
-moz-box-shadow: 30px;
box-shadow: 30px;
}

Pretty nifty, ay?

9 – Auto-complete

Escape

Most IDEs offer the ability to autocomplete code – like method calls and variable references – typically by typing Control + Space. TextMate offers a similar feature, but via the Escape key instead. The key choice is a bit odd, but, of course, you can always map this to a different shortcut if you prefer. Simply type part of a variable or method name, press Escape, and TextMate will attempt to complete the word for you.

If you’d prefer project-wide autocompletion, you can also use Command + ;.

10 – Turbo-Charge the Editor

Ciarán Walsh, a few years ago, created Project Plus, which enhances TextMate in a number of ways – the most noticeable being that it replaces the often criticized elastic sidebar with a more traditional one.

It also offers excellent, status badges to keep track of – for Git purposes – which files have changed since last being committed.

11 – Switch the Page Language

Shift + Control + Option + {First-letter-of-language-choice}

Dependent upon which language you specify for a page (set automatically by default), you’ll have access to different syntax highlighting and commands.

Chances are, you’ll find yourself updating this often. It can be done manually by clicking the L button at the bottom of the editor.

This is a drag though. You can speed things up by typing Shift + Control + Option + {First-letter-of-language-choice}. For instance, if I want to change the page language to CSS, I’d type Shift + Control + Option + C.

12 – Download Custom Bundles

You’re certainly not limited to the dozen or so bundles that come preinstalled with TextMate. There’s a hugely robust community; you can download bundles and extensions for just about any language imaginable. A quick search on GitHub will return hundreds of results.

Download Nettuts’ CSS3 TextMate bundle.

13 – Search for a Command

Control + Command + T

There’s no denying it: it’s really difficult to remember all of these various commands. Rather than falling back to using the mouse and menu selections, instead type Control + Command + T. This will bring up a popup box, where you can then search for your desired command or snippet.

14 – Full Screen Mode in Lion

Now that Lion is officially available to the public, you can upgrade TextMate to provide full screen support, using this plugin.

15 – Speedy File Opening

Command + T

If you’re the type who requires lightning fast file switching, TextMate provides a built-in utility for opening files. Press Command + T to activate it.

However, if you’d prefer something a bit more robust and fuzzy, I highly recommend looking into PeepOpen, which works in a variety of editors. In addition to TextMate, I also use it in Vim.

” Search on both paths and filenames, and easily open the file in your text editor with a single keypress. Useful metadata helps you quickly choose the file you’re looking for.”

• Learn more about PeepOpen on Nettuts+

16 – FTP Access

An advantage that Espresso and Coda have over TextMate is that they offer built-in FTP access. This makes the process of editing files on your server as easy as possible. While TextMate doesn’t have a native solution to this problem, most Mac developers also use Panic’s popular Transmit app.

We can use these two apps in tandem to edit files on our servers. Transmit offers the ability to mount a directory on your computer.

With your server directory mounted, you can now open the directory from within TextMate. Each time you save a file, it will automatically be updated on your server as well. An elegant solution to a common gripe!

That’s All for Now!

I’ve barely scratched the surface of TextMate’s power. What are your favorite shortcuts and tricks? Let me know in the comments, and I just might update this article with your tip!

More TextMate Articles from Nettuts+

• CodeIgniter Bundle
• Use TextMate Bundles to Increase your Productivity
• Learn How to Be a TextMate Champion