Becoming More Efficient with TextMate

September 24, 2010


On the surface, TextMate may not look like much. The self-proclaimed "missing editor" for Mac OS X looks pretty simple, especially if you're only familiar with WYSIWYG editors (such as Panic's Coda or Adobe's Dreamweaver) that might appear to be more robust. However, rest assured that TextMate is just as robust, if not more so, than many WYSIWYG editors.

On the surface, TextMate may not look like much. The self-proclaimed “missing editor” for Mac OS X looks pretty simple, especially if you’re only familiar with WYSIWYG editors (such as Panic’s Coda or Adobe’s Dreamweaver) that might appear to be more robust. However, rest assured that TextMate is just as robust, if not more so, than many WYSIWYG editors.

We’re going to look at some of the features that make TextMate so powerful, as well as a few shortcuts that will increase your efficiency and productivity. If you’re new to TextMate or if you’re just considering it, I hope that the following information will be useful to you.

Why TextMate?

I use TextMate every day for just about everything. From coding websites and emails, to writing ActionScript and ExpressionEngine templates, to taking notes and writing blog posts. What I love most about TextMate is its simple and minimal user interface. Despite having so many features, the interface is not cluttered with a variety of buttons and menus because many of these features are triggered with the keyboard. For that reason, distractions are very minimal and productivity is increased by focusing on writing code.

Why so powerful?

TextMate has plenty of features and utilizes a unique scoping system which makes it every bit as powerful as a WYSIWYG editor or a language specific IDE. Some of the features that I am going to discuss include bundles, tab triggers, templates (which are a part of bundles), and shell variables. I’ll finish up with some useful shortcuts that will make you more efficient.

Bundles

A large part of TextMate’s functionality is provided through numerous language specific bundles. Bundles contain things such as snippets, commands and templates. What’s great about bundles is that you can customize existing ones or create entirely new ones to best suit your needs. To do this, open the bundle editor by clicking on Bundles > Bundle Editor > Show Bundle Editor (or use the keyboard shortcut Command-Option-Control-B). Once you find yourself within the bundle editor, you will see a list of all of the bundles on the left-hand side. From there, you are able to edit and add whatever you want. To learn more about creating, managing, and activating bundles, click here.

Tab Triggers

Tab triggers are contained within bundles and allow you to quickly produce code that you might otherwise be repeating. Basically, a tab trigger is a sequence of text that you enter in a document and follow it by pressing the tab key. This will remove the sequence entered and then execute the bundle item. Tab triggers are very useful because you can simply type the specific item you wish to execute. If there are multiple items associated with a single tab trigger (e.g. doctype), you will see a menu with all of the possible options along with a number associated with each item.

One of my most used tab triggers is for HTML templates. When working with HTML files, templates help me immensely when starting a new project. By simply typing the word template and then hitting the tab key, I’ve got a choice of multiple templates. And of course, any template is able to be customized to your liking using the bundle editor. For example, I’ve created a template using the HTML5 doctype along with all of my necessary elements (references to external files, layout, etc.).

Try a few of these other tab triggers in an HTML document:
doctype, head, style, script, div, !

To get more information on tab triggers and how they work, click here.

Shell Variables

I’m probably not using shell variables to their maximum potential, but there is one specific variable that I use regularly and it’s for self-closing XHTML tags. When I’m writing a web page in XTHML, I just turn this variable on and any of my br and img tags that I generate will have the proper syntax.

To access shell variables, open Preferences, click the “Advanced” tab and then on “Shell Variables”. You can read more about Shell Variables here.

Useful Shortcuts

Now that we’ve briefly covered a few of TextMate’s features, here are a handful of useful shortcuts that I find myself using constantly. Many of these shortcuts apply to HTML documents, so feel free to browse through the bundles to find even more shortcuts for other languages. Remember, if there aren’t enough shortcuts that complement your workflow, you can always edit existing shortcuts or create your own. And of course, if you know of any useful shortcuts that I may have missed, please share them in the comments!

Create a Project
To create a new project in TextMate, simply click and drag the folder that contains all of your website’s files onto the TextMate icon in your dock. This will open the project side bar where you can access all of your files. You can also drag a group of files to the dock, they don’t have to be in a folder.

Generate Lorem Ispum Text
Within a plain text document, type the word “lorem” and press the tab key. This will geneate a paragraph of dummy text. You can use the bundle editor to add more text if you’d like.

Select a Column of Text
It’s possible to select column data by holding down the option key and making a selection with your mouse. This shortcut really comes in handy when you have to add a class to multiple li elements. For more information on working with text, click here.

Navigating a Document
Here are some commands to help you quickly navigate your document. Hold down the shift key with any of these commands to select the text or code. The following commands are pretty common within Mac OS X.

Command-Arrow Up/Down Moves the cursor at the top/bottom of the document
Command-Arrow Left/Right Moves the cursor at the beginning/end of a line of text
Option-Arrow Up/Down Moves the cursor at the first/last row in the current column
Option-Arrow Left/Right Moves the cursor at the beginning/end of a word

Change the Language Type
When you open a new document, you can quickly change the scripting language you are working with simply by pressing a few keys. The language type is located at the bottom of the document window. The following are the ones I use the most.

Control-Option-Shift-H Changes the document’s scripting language to HTML
Control-Option-Shift-C (3) Changes the document’s scripting language to CSS
Control-Option-Shift-J (4) Changes the document’s scripting language to JavaScript
Control-Option-Shift-E Changes the document’s scripting language to ExpressionEngine (requires the EE bundle)
Control-Option-Shift-P (2) Changes the document’s scripting language to PHP
Control-Option-Shift-A (1) Changes the document’s scripting language to ActionScript

Find a File
When you’re working within a project, chances are you have a lot of documents. This command enables you to find that particular file quickly by opening a dialog box where you can type the file’s name.

Command-T Go to File

Insert a Comment
This is a simple way to add a comment. The type of comment that is generated depends on the type of document you are working with. Just select a block of text or code that you want commented and press this command. Press it again to remove the comment.

Command-/ Wraps text within a comment

Indenting
How many times have you opened an HTML file only to find that it’s almost impossible to read because it wasn’t indented properly? These commands will keep your markup looking nice and clean.

Command-Option-[ Performs a “smart” indent
Command-] Performs an indent
Command-[ Performs an outdent

Inserting a Line Break
Here is a quick way to add a line break to your HTML document. When utilizing a shell variable for XHTML, your generated br tag will contain the self-closing slash.

Control-Return Inserts a line break

Emphesizing Text
In an HTML document, select some text and press either one of these commands to give the selected text emphesis. By default, TextMate will use the strong and em tags, but you can change these in the bundle editor if you wish to use the b or i tags.

Command-B Wraps the selected text with the strong tag.
Command-I Wraps the selected text with the em tag.

Create a Hyperlink
This command will wrap the selected text with the a tag. If you happen to have a URL on stored on your clipboard, the URL will automatically inserted be within your href.

Control-Shift-L Wraps the selected text with the a tag

Close a Tag
This command gives you a quick way to close an open tag within an HTML docment.

Command-Option-. (period) Closes the last open tag

Changing Case
If you need to change the case of a particular line of text, this commands will save you from having to retype the text in your desired case.

Control-U Converts the selected text to UPPERCASE
Control-Shift-U Converts the selected text to lowercase
Control-Option-U Converts the selected text to Titlecase

To Conclude…

While I’ve covered some of the features that make TextMate so powerful, I’ve hardly scratched the surface of what’s possible. There are plenty of other features that I didn’t discuss, so I would encourage you to check out the manual to get a more in depth look and utilize TextMate to its fullest potential. In addition to the manual, there is also a collection of screencasts that may be helpful if you are new to TextMate.

I hope that you’ve found something useful and I would love to hear about how you are becoming efficient with TextMate in the comments!




Comments have been disabled for this entry.