Advertisement
Tools & Tips

Essential TextMate Shortcuts, Tips and Techniques

by

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.

Vertical Text Select

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.

Incremental Search

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.

Bookmark Lines

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.

Permanent Macros

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."

Clipboard History

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"

shell script

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.

Project Plus

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

Git Changed
Git Changed

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.

Language Selection

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.

CSS3 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.

Search

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.

File Open

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."

File Open

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.

Transmit

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.

Transmit mount feature
Transmit mount feature

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+

Related Posts
  • Code
    Web Development
    PHPStorm: When the IDE Really MattersPhpstorm preview
    The IDE that you choose to use day in and day out, can make a big difference in your web dev workflow. PHPStorm offers many wonderful features to improve this process, let's take a look!Read More…
  • Code
    Tools & Tips
    Check Out Atom, GitHub's New Development EditorAtom wide retina preview
    It's been awhile since we've seen any updates in the editor space. The last big splash was made by Sublime Text which took the web development community by storm, especially once Package Control came around to serve as the package manager for the editor.Read More…
  • Computer Skills
    App Training
    Alfred Workflows for IntermediatesAlfred400
    Welcome back! Since you are reading this, you must have enjoyed the beginner's tutorial. Great! Now, let’s dig a little deeper by making a workflow that will help manage our Downloads folder, as well as a Projects Manager.Read More…
  • Computer Skills
    Customization
    Beyond Terminal: 4 OS X Terminal AlternativesCathode1
    Terminal is an invaluable tool that every Mac user should explore. In the past published a number of OS X Terminal tutorials to help improve your workflows and general productivity. Though for some Mac users Terminal isn't equipped enough for their needs and these people often seek other solutions which can achieve a similar result. In this tutorial I'll cover some of the best Terminal replacements available and show how they can benefit you.Read More…
  • Code
    Creative Coding
    Creating a TextMate Bundle to Easily Package Your WordPress ProjectTextmate bundle 400
    If you've developed a WordPress theme or plugin, then you know how fast your codebase can grow in just a short amount of time. You start off with just a few PHP, JavaScript and CSS files. Then you find yourself creating image assets and adding them to your codebase together with their Photoshop file counterparts. After a while you'll be including other third-party PHP libraries as well. Then when you're finally ready to ship your WordPress project, you'll end up having a web of multiple file types like *.php, *.css, *.scss, *.js, *.min.js, *.png and *.psd, maybe you'll have some hidden files like .DS_Store. You would eventually need to clean your codebase up before zipping them all up for your users. Normally, this just means that you duplicate your files, then scan each and every directory deleting all the unwanted files. You'd then archive your project then perhaps use a third party app to remove the hidden files. This article will teach you on how to automate this packaging process by building a TextMate Bundle that would do everything for us with a single shortcut key. [tip]This article teaches about some tips regarding TextMate, an awesome code editor for Macs. You can find more information on TextMate from MacroMate's website[/tip]Read More…
  • Computer Skills
    App Training
    Alfred Workflows for BeginnersAlfred400
    Ever since Alfred 2.0 was in beta, I have been making Alfred workflows for myself and for others. It is a lot of fun and very helpful to my daily workflow. I usually average using Alfred around 130 times a day, with my peak day of 768 times. I am going to show you the basic concepts of workflow design in this tutorial, all the way to the very advanced features that you can use in your own workflows in later tutorials. So, come join the fun!Read More…