For those of you coders that are new to TextMate, I’d like to introduce you to a few of my most commonly-used commands and shortcut keys.

I use TextMate for HTML, CSS, Javascript, and PHP far more than for any other languages, so let’s start with HTML.

Language

Make sure you choose the correct language when working in a TextMate document. You can find this at the bottom of the document’s window:

Also, while you’re moving around in TextMate, pay attention to the keyboard shortcuts listed in the menus. Learn the ones you commonly use! In this example, you should learn to use Control + Option + Shift + H to set the document for HTML text. (By the way, PHP is handled using HTML). Learn as you work!

HTML

TextMate will complete HTML tags (or XML or even bogus tags) for you, depending on your key commands.

Open the tag yourself, manually. Then have TextMate complete it for you.

Start by typing an opening tag. For this example, let’s just use a <p> tag.

Type this stuff:

<p>some paragraph text here

Then when you’re ready to close the tag, use the shortcut Command + Option + . (period). TextMate will close the most recently opened tag for you.

This is very helpful when writing HTML directly. Also, this feature comes in handy if you’re trying to figure out how many opening <div> tags are ahead of you. If you’re editing some nasty HTML, you could use this feature to count how many <div>s close before the final </body>, for example.

Wrap some selected text in a tag.

This feature is extremely useful, especially once you get the hang of it. One common scenario is when you’re converting plain text to HTML. Commonly I’ll just past in a whole client-supplied text document into a new TextMate document. Then I’ll go through the text and add the necessary HTML.

Here’s an example. Say we have some text like so:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

* lorem ipsom
* duis aute irure
* dolor sint labore
* nisi ut commodo

Start by selecting the text of the first paragraph. Then simply hit the shortcut Control + Shift + W (think Wrap!). TextMate will wrap your selection with a tag, by default it uses “p”.

Now before you move the cursor or click anything, immediately type some text. You’ll notice that whatever you type is placed into the tag name. So you can wrap some text, then type the tag, and TextMate will handle both the opening and closing tags. Try it out with `div` or `span` or `foo` or `bar`.

Wrap each line of some selected text with a tag – each!

Here’s where things get even better.You can also have TextMate wrap each line in a selection of text with a tag – per line. For example, take the lorem ipsum list from above. It’s obvious these are to be put into an unordered list.

First, delete the asterisks and extra space from the beginning of each line on the list-to-be:

lorem ipsom
duis aute irure
dolor sint labore
nisi ut commodo

Next, select the entire block (all four lines). Then use the shortcut Command + Control + Shift + W (think Wrap, but with Command). Each line will be wrapped by an <li> tag. Again, you can begin typing immediately if you want to use a tag other than <li>. TextMate just assumes a list item by default.

Pretty helpful, huh?

A little about column editing

Above, we removed an asterisk and space character from the beginning of each line. You probably did this one line at a time.

TextMate has a column editing feature, meaning you can manipulate whole columns of text in one shot.

Start back with our list, including the asterisks and space:

* lorem ipsom
* duis aute irure
* dolor sint labore
* nisi ut commodo

Then select the first asterisk and space on the first line.

Then just use your arrow keys and hit down a few times until your selection/cursor are like what’s shown here:

Then, hit the Option button once. You’ll notice your selection changes to that of a column selection:

Hit Option a few times to understand how it toggles between column and normal selection.

While you have the column selected, type some text to see how each column is modified, simultaneously.

That’s good for today

I think that’s a good start for you today. Have fun!