7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Code
  2. Tools

Learn How to be a TextMate Champion

Scroll to top
Read Time: 5 mins

TextMate is, by far, the preferred text-editor for most web developers on the Mac. In today's screencast we'll be taking a look at some of the features most developers simply don't use which can massively increase your productivity by allowing you to type less!

Not a Mac person? Jeffrey has a screencast titled "How I Can Code Twice As Fast As You" showing how to perform similar actions using a "text expander" application in Windows.

Full Screencast

Shortcuts Used

You can view all of TextMate's shortcuts and functions under the 'Bundles' menu. Here are some of the ones I use regularly:


Option (Alt)
Escape (esc)
↓ ← ↑ → Keyboard arrow keys


Shortcut Action
⌃ ⇧ , New HTML tag pair
⌥ ⎋ Tag/attribute auto-completion
⌘ ⇧ 7 Convert selection to HTML entities
! ⇥ Internet Explorer Conditionals
⇧ ↩ Line Break
⌃ ⇧ V Validate HTML / CSS
link ⇥ Stylesheet Link Tag
style ⇥ In-line style block
scriptsrc ⇥ External JavaScript tag
script ⇥ In-line JavaScript block


Shortcut Action
php ⇥ <?php ?>
echo ⇥ <?php echo ?>
if ⇥ <?php if (...): ?>

<?php endif ?>

ifelse ⇥ <?php if (...): ?>

<?php else: ?>

<?php endif ?>

for ⇥

foreach ⇥

while ⇥

array ⇥

switch ⇥

case ⇥
As you'd expect.
req ⇥

req1 ⇥

incl ⇥

incl1 ⇥
require 'file';

require_once 'file';

include 'file';

include_once 'file';
$_ ⇥ Select $_['POST'], $_['GET'] etc. (Global Arrays)
⌃ ⇧ V Validate syntax
⌘ ⇧ R Run PHP file


Shortcut Action
if ⇥

ife ⇥ (if, elsif)

unless ⇥

while ⇥
As you'd expect.
req ⇥ require ""
reqg ⇥ require "rubygems"

require ""
Hash ⇥ Hash.new { |hash, key| hash[key] = }
: ⇥ :key => "value",
File ⇥ Select for different 'File' object methods (read, write etc.)
⌘ R Run Ruby file


Shortcut Action
cla ⇥ Create Rails Controller
flash ⇥ flash[:notice] = ''
ra ⇥ render :action => ''
vp ⇥ validates_presence_of :input
vl ⇥ validates_length_of :input, :within => 1..12
⌃ P params[:object]
⌃ J session[:object]
⌃ ⇧ . <%= %>
ff ⇥ <% form_for @model do |f| -%>

<% end -%>

f. ⇥ Select for Rails' form helper - label, field, password, textarea, checkbox etc.
slt ⇥ <%= stylesheet_link_tag '' %>
jit <%= javascript_include_tag '' %>
⇧ ⌥ ⌘ ↓ Go to appropriate controller, model, view etc. for current file
mcol ⇥ Use in migrations. Select to add, edit, rename, remove columns etc.

Create Your Own Shortcut/Hotkey

We're going to create a shortcut (accessed with ⌘⇧A) to wrap the currently selected text in a link, and jump you straight to the href="" attribute to enter the URL.

In TextMate, go to "Bundles > Bundle Editor > Show Bundle Editor" (or press ⌃⌥⌘B). This is what my editor looks like. Yours may look different as I have added some custom Bundles and removed some for languages I don't use:

Click on the HTML drop-down (bundle), click the + at the bottom-left of the window and select 'New Snippet'. Name this snippet 'Wrap Link' then for the 'Activation', select 'Key Equivalent' and in the box enter the key combination you wish to use (eg. ⌘⇧A).

Inside the text-area enter:

$TM_SELECTED_TEXT is a variable containing the selected text. Close the window and try it out. Open a document in TextMate, highlight some text and press your key combination. The selection will be wrapped in anchor tags.

However, as it is now, you still have to move your cursor into the href="" attribute to enter the actual link. Wouldn't it be easier if our cursor moved itself there automatically?

Change the 'Wrap Link' command to the following:

The ${1} tells TextMate where to place the cursor after performing the task. You can place ${2}, ${3} etc. and then move throughout them using the tab key.

Finally, change the command to:

You can add default text at a location using ${2:Default text} . 'Default text' will display, and automatically highlighted when you tab into it.

In our case, we have set the selected text as a tab location for circumstances when you may want to change the original text.

You could also 'mirror' text entered at tab points, like so:

Whatever you then enter on the first tab, will automatically be entered in other positions which hold the same value.

Further Examples:

Personally I've created my own bundles for including the jQuery libraries, entering 'Lorem Ipsum' text, and also for writing Nettuts articles. For example:

jQuery Snippets

Find yourself using mindlessly entering jQuery tags? Try these:

'jQuery CDN' accessed with inc-jquery tab-trigger:

'jQuery UI CDN' accessed with inc-ui tab-trigger:

'jQuery Inline Script' accessed with inline-jquery tab-trigger:

'jQuery Document Ready' accessed with jquery tab-trigger:

Note: The back-slashes at the start of $(function() { is to escape the $ character – otherwise TextMate will think it's a variable for it to try and render!

You could also simply assign all these to a jquery tab-trigger, then when you execute it, you will get a drop-down menu to choose from. This is useful if you prefer not to memorise huge groups of snippet names!

Nettuts Snippets

I also have a bundle for the various tags Nettuts articles depend upon, such as:

'Pre Code Block' accessed using nt-pre tab-trigger:

'Tuts Image' access using nt-img tab-trigger:

When writing articles I use a small template to make it easier to read when proof-reading. This snippet has an example of 'mirroring' on the Title and H1 tags. I access this using the nt-template tab-trigger:

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.