Handy TextMate tips for working with HTML & CSS

August 28, 2009

Handy TextMate tips for working with HTML & CSS

I use TextMate a lot when doing web development, and I absolutely love it. Some of my friends and colleagues also use TextMate, and I get questions like “what was that thing you did with the thing with the text” sometimes. Here, I thought I would document some of the ones I use most frequently.

Creating tag pairs

To create a tag without having to type those pesky angle-brackets and other thingamabobs, there are a few ways to go about it. First, if you find that you already opened the tag “manually”, you can always close a tag by pressing ⌘ (cmd), ⌥ (alt) and “.”. Secondly, you can open a pair of opening and closing tags by using ctrl and “<”. That gives you a default tag of “<p></p>”, which you can then either just change into whatever you want by typing the tag name, and the closing tag automatically changes, or you can tab into the middle if you’re happy with creating a p-tag (same goes for when you have changed it, press tab to jump into the tag).

This way of creating a tag pair allows you to type in attributes before tabbing into creating the content of the element. There is a second way to use this command, and that is to type the name of the tag first (like for instance “li”) and then hit ctrl and “<”, that will give you opening and closing tags and the cursor placed inside straight away.

If you already have a piece of content (a line of text or other HTML elements) that you need to wrap in a pair of tags, you can use ctrl, ⇧ (shift) and “w”. Too bad it doesn’t reindent your code for you, but you can’t win all the time…

Working with selections

Speaking of wrapping stuff, one really useful command when wrapping text with “<a>”-tags is to use ctrl, ⇧(shift) and “L”. That means the text you selected becomes a link, and as an added bonus, the contents of your clipboard gets inserted as the value of the href-attribute. Pretty handy, eh? When I create dummy links on a page, I just copy a hash-character (#) and then just zoom through the text, adding links where necessary. You can also use the same command without selecting text, which gives you an empty “<a>”-tag, then just tab into entering the link text when you’re done with the attributes.

TextMate also has the lovely quality of being able to select text over specific columns as well as multiple lines. This means you can make a selection of a specific part of multiple lines and enter text into this spot on all lines, simultaneously. The easiest way of doing this is to hold the ⌥ (alt) key while selecting an area with the mouse. Try creating a few lines of empty space, select a column across all lines and type “<li><a href=”#“>List item</a></li>” - Hey presto, a list with multiple dummy items in one fell swoop! If you’re not a mouse user, you can enter this multiple-row-editing mode by creating a few empty lines, selecting them (by holding ⇧ (shift) and using the arrow keys) and then pressing ⌘ (cmd) + ⌥ (alt) + “a”.

Element specific stuff

There’s also an abunance of element-specific commands to use. When creating a new HTML document, you can either use one of the templates that ship with TextMate, but if you prefer to do everything “by hand”, try typing for example “doctype” followed by pressing tab (and then hit the number key for the option you want), or why not “head” + tab? There are too many of these to go through, but apart from the above mentioned “doctype” and “head” shortcuts, try tabbing after typing “form” or “table”. That gives you some default scaffolding instead of the tedious work of typing out everything in these elements by hand.

You don’t do the math

When editing CSS, I don’t use as many shortcuts, I find that they mostly slow me down. A couple of things worth noting is that most properties can be tab-completed, if you’re unsure of spelling or syntax. Try typing “background” followed by a tab, for example: that will give you a couple of choices for background properties.

One thing that is quite handy, though, is the built in math bundle: you can do calculations of measurements inline! Say that you’re trying to calculate the em-size of a particular piece of text, and you want it to harmonize with the vertical rythm of the page. You need a line height of 18px for text set in 14px, in ems. Just type “line-height: 18/14em;”, select the “18/14” part and press ctrl + ⇧ + “C”, which gives you a couple of options for calculating a value. Choose “evaluate and replace expression” (no. 2) and you’re good to go!

Finally, it’s also worth mentioning in this context that all of the defaults for what happens for a specific command is easily customized via Bundle Editor, accessed via Bundles - Bundle Editor - Show Bundle Editor (there’s even a keyboard shortcut for that: ⌘ + ⌥ + ctrl + “B”).

Happy coding!

11:01am | URL: https://emilbjorklund.tumblr.com/post/173727936/handy-textmate-tips-for-working-with-html-css

(No. OF NOTES: 43)