#90: Simple TextMate Tips

TextMate is a mac-only code editor. Sorry to all the PC users this time around. If you've been watching these screencasts for a long time, you know I used to mostly use Coda. Since I've been working a lot more locally, I've been using much more TextMate, which I've always considered to be superior as a code editor but just wasn't as convenient as Coda being all-in-one. I'll cover some things I find cool and useful in TextMate, like vertical text selection, mass indenting, commenting, code folding, find in project, using the minimal bundles, zen coding, and more. I'm sure there are some TextMate gurus out there, so please feel free to share your own tips.

Links from video:


  1. User Avatar
    Jamie Pates
    Permalink to comment#

    Good screen cast Chris, I was a bit disappointed when you said it was going to be an all text-mate video because I’m a pc user but many of the things you mentioned apply to Notepad++ which is a very similar text editor for windows so good job.

  2. User Avatar
    Jordan Myers
    Permalink to comment#

    Another alternative to TextMate if you are on a PC is Sublime http://www.sublimetext.com/

    • User Avatar
      Jamie Pates
      Permalink to comment#

      In all fairness, it’s an alternative to Coda on windows that I really need. At the moment I’m using notepad++ for quick changes and stuff away from my computer and Dreamweaver at home but that’s a bit clunky, I need something lightweight with ftp support.

    • User Avatar
      Vassilis Mastorostergios
      Permalink to comment#

      I’ve tried every single code editor for Windows in my time, I mean Aptana, Dreamweaver, Sublime, E-TextEditor, Notepad++ and whatnot.

      The best (and I mean T H E best) is RapidPHP 2010.
      Coda compared to RapidPHP is like Notepad compared to MS Word 2010.

    • User Avatar
      Permalink to comment#

      Nice one I have been trying different text editors for a while. I will give RapidPHP 2010 a bash now!

    • User Avatar
      Permalink to comment#


      You ought to try UltraEdit, it’s my favorite windows text editor. It’s lightweight and has FTP support.

    • User Avatar
      Sebastian Gonzalez
      Permalink to comment#

      notepad++ just released a new version (5.7, I believe) and it has a GREAT FTP client with it that they actually approve of and support. It’s made my life a whole lot easier than having to have 2 different things open. (which I hate.)

  3. User Avatar
    Permalink to comment#

    I also like the single line css format. When I get files that are in the multi-line format. I just do a command + a to select all and hit control+option+Q and BAM single lines. use that one all the time.

    • User Avatar
      Jörg Gudehus
      Permalink to comment#

      What is the advantage to put css code in a single line????
      No structure, long lines that break somewhere.
      Tell me one reason to do this.
      To save linefeeds?

    • User Avatar
      Permalink to comment#

      Super stud! Thanks man.

    • User Avatar
      Permalink to comment#

      I wrote CSS in one line for a long time, because it’s more scanable. But now I use traditional style. It’s super fast to find in TextMate with “Go to Symbol”. And one line isn’t good for Version Controll.

  4. User Avatar
    Permalink to comment#

    “Uh, there’s no open tags dood”

    Chris Coyier, explaining the error beeps to the rest of us.

    As for Windows, N-Type, E, and Sublime are incredible text editors. Notepad++ is my choice. On Linux, you have the options of Kate and GEdit (as well as Emacs and Vim, of course). All of the above, maybe with the exception of NP++, support soft-tabs. That’s especially helpful if you are doing python development and the previous author used soft-tabs themselves.

    Also, you missed my favorite tip: Holding option should turn the cursor into a crosshair. With it, you can block select text and move it. Jetbrains’ IDEs and Aptana also do this, I know for sure. Some people call this rectangular selection, but I call it block selection. Uberly userful.

    Also, the video, both the flash and downloaded, is cutting out at around 10:00. Could be just my computer, but I was able to reproduce it both here and in VLC.

    • User Avatar
      Permalink to comment#

      Found the problem. There’s a bug in Chrome dev that is limiting all file downloads, in browser or saving, to 40MB. In case anybody else had that problem.

  5. User Avatar
    Permalink to comment#

    Chris, you should check out Yoast’s WordPress TextMate Bundle. http://yoast.com/tools/textmate/

  6. User Avatar
    Permalink to comment#


    cool screencast. pretty convincing pitch here. a h3ll of a lot of cool and handy features. I’m looking this up to install, and it’s got to be purchased – single user license (€39).

    Come on. With the number of free coding softwares out there, you had to pick that one… lol

  7. User Avatar
    Erik Reagan
    Permalink to comment#

    Nice overview of some useful TextMate features.

    Just to answer your (pseudo) question to yourself in the video:

    When you tab out from certain lines of text (like when the anchor tag didn’t work at 11:03) it is actually going to the end of the “current” snippet. If a snippet has a placeholder of “$0” it is defining the final location from the tabbing through of placeholders. If the snippet doesn’t have a final placeholder (“$0”) then you can start a new snippet like you tried.

    If you go to the Bundles Editor and select the “li” snippet in that bundle you’ll probably find that there is a $0 placeholder at the end of the list item line.

    So there you go

    Thanks for the video Chris

  8. User Avatar
    Permalink to comment#

    I don’t know the exact key in TextMate, but in e text editor, when you press Control+L it pulls up a list of “symbols”, these are all of your elements with ID’s in the document. Not as useful for HTML, but very useful for searching through css files. I’m guessing it’s Command or option + L on textmate

  9. User Avatar
    Christopher Imrie
    Permalink to comment#

    The ones I use all the time are:

    Ctrl + Shift + <
    This will create a tag pair which you can then continue typing and it will copy what you write into the opening and closing tag

    Ctrl + Shift + w
    Hitting this whilst something is selected will wrap your selection in a tag pair. Like the command above simply continue to type after you hit this command and you will be able to specify what the tag is

  10. User Avatar
    Daniel Petrie
    Permalink to comment#

    As a few other have mentioned E – TextEditor for windows is very very similar form what I’ve seen from Textmate. It supports most of if not all the features you showed in this clip. Direct support for Textmate bundles and themes as well.

    I just started using it a little over a month ago (trial) and bought it right away… I love it.

  11. User Avatar
    Permalink to comment#

    I like netbeans

  12. User Avatar
    Permalink to comment#


    About the find feature, you were talking about a quicker alternative. Try ctrl+s ;) it’s the scanning feature. I recommend you the TextMate book. Very interesting things in it :)

  13. User Avatar
    Permalink to comment#

    Just wanted to say thank you so much Chris.
    this was a great help to make better use of this great tool.
    Also thank you for taking the time and energy to help others improve their craft.

  14. User Avatar
    Permalink to comment#

    If you like the twilight-theme you should check out idleFingers

    Also is there any difference between cmd+bracket in stead of plain old option(+shift)+tab?

    • User Avatar
      David Turner
      Permalink to comment#

      I was just looking for a way to match the cmd+bracket combo, as I prefer using the tab personally. Turns out that the method you’re asking about is actually an alternative meant for european keyboards, so the functionality is exactly the same.

  15. User Avatar
    Oliver Davies
    Permalink to comment#

    Brilliant screencast! It’s going to re-ignite my personal TextMate vs. Coda debate…

  16. User Avatar
    Permalink to comment#

    I hate these Mac-specific screencasts. No use for windows people! :(

    • User Avatar
      Andrew Turner
      Permalink to comment#

      Yeah I know – It’s a bit annoying, but a lot of the design industry are going over to Macs, same with education.

      Most of these tips can be applied in some way to E-Text Editor which is pretty much like Textmate only for Windows.

  17. User Avatar
    Permalink to comment#

    Another great screen cast though I have no clue what you’re talking about. I hate being such a noob. Any chance you could throw together another converting PSD to CSS screencast and show how to get the footer to stay on the bottom of the page. I can never get that to work right.

    • User Avatar
      Ralf Hortt
      Permalink to comment#

      its css

      #el {
      position: fixed;
      bottom: 0px;
      left: 0px;
      width: 100%;

  18. User Avatar
    Permalink to comment#

    Nice screencast, as always. Although I’ve never quite understood the reasons behind the anti-Dreamweaver folks. Especially when they then try to recreate much of its functionality through a bunch of bundles.

    • User Avatar
      Brian McNitt
      Permalink to comment#

      I used Dreamweaver daily for 10 years. Nothing wrong with it, but I forced myself to try Coda and TextMate this year partly as a reaction to Adobe upgrade pricing, and part just to see what they’re about. Honestly, it was very disorienting at first. I found I relied heavily on DW’s CSS panels and built-in FTP. After six months of using TextMate and working in a pure text-based environment, I feel that my coding knowledge has improved and I’m actually able to write code faster a) because it forced me to remember more code syntax, an b) TextMate + Transmit FTP makes for very quick code/preview site/code transitions. Again, nothing wrong with DW but as a 10 year DW user, I’d recommend giving TextMate an extended trial. I’m sold.

  19. User Avatar
    Permalink to comment#

    My favourite is Komodo edit:


    Not many people know about it I guess, but is has a ton of useful features, like the ones you explained, and FTP support, things like split view and all kinds of handy stuff. Plus this version is free.

  20. User Avatar
    Aaron Bazinet
    Permalink to comment#

    I used to use TextMate and Coda, but MacRabbit has been working hard on Espresso. Once it got updated and stable I’ve been using it ever since. It’s a joy to use, it just feels good.

    Try Espresso with TEA (Text Editor Actions) and the HTMLBundle.sugar and it’s excellent. http://onecrayon.com/tea/

    One Crayon and others have this stuff for Coda too.

    Once Panic releases the next version of Coda, knowing those Panic guys, it’s definitely possible I’ll be switching back to Coda. But until then, Espresso’s where it’s at.

  21. User Avatar
    Permalink to comment#

    Argh! This is persuading me to move away from Coda and towards TextMate. Do a similar thing for Coda! ;)

  22. User Avatar
    Permalink to comment#

    Chris –

    You always hit the nail right on the head. I subscribed to a variety of coding/wp related blogs and yours has the highest post rate for relevant, interesting, down-to-earth-and-downright-actionable posts.

    This TextMate screencast just strengthens my point.

    Why is it again you don’t have a Twitter account posted anywhere? Am I that blind?

    I really look forward to your updates popping up in NewsFire.

    Here’s to you!

  23. User Avatar
    Permalink to comment#

    Awesome screencast Chris! I definitely learned alot from it and now enjoy using TextMate after installing these bundles…Zen Coding, however, is going to take some getting use to.

    Question for the TextMate guru’s…Is there a way to create some kind of command to quickly display a base of a new html5 document? For example: maybe type “html or html5 + the tab key” to generate the following

    <!DOCTYPE html>
    <html lang="en">
      <meta charset="utf-8" />
      <title>Title of the document</title>
    • User Avatar
      Permalink to comment#

      I’m hardly a guru, but AFAIK:

      1. Open the Bundle Editor & select the + sign with the arrow key (more options)

      2. Choose “New Snippet”

      3. Delete the default code that appears in the editor window and replace it with your code template.

      4. Go down to the “Activation” box, make sure that “Tab Trigger” is selected, and enter “html5” as you tab-trigger.

      Now, anytime you type html5+tab, your template will appear in your TextMate document.

      Hope this helps!

    • User Avatar
      Permalink to comment#

      Thanks Daniel…worked like a charm. I appreciate it!

    • User Avatar
      Permalink to comment#

      Hey, I’m also looking to change Textmate to when I open the program…it opens up with the language as HTML instead of the default Plain text. Any suggestions? I’d appreciate it.

  24. User Avatar
    Permalink to comment#

    I really enjoyed this. I’ve been using TextMate but not going in and doing anything like the zen stuff.

    Off topic, I’d love to see a screencast about using WP 3.0’s Custom Post Types and Custom Taxonomies together.

  25. User Avatar
    Permalink to comment#

    there is this very simple alternative to coda in pc named ftpedit , so you can try that , it’s nothing near coda but lets you edit using ftp

  26. User Avatar
    Vipul Sharma
    Permalink to comment#

    zen coding is relay speed up to build your site

  27. User Avatar
    Kim Korte
    Permalink to comment#

    Awesome screencast, very well done.
    One thing just to mention: If you like Tabs more than Spaces (I think it’s easier to navigate with the keyboard) and get a file where spaces are used, don’t waste time replacing all those spaces with tabs but rather use ctrl + shift + alt +t.

    Oh and you can find all keyboard commands by pressing cmd + alt + t

  28. User Avatar
    Permalink to comment#

    Thanks for the share. LT

  29. User Avatar
    Permalink to comment#

    You can edit multiple lines at once by selecting them and presing Cmd+Option+A. It’s different than vertical selection, but a bit difficult to explain, so better try it yourself.

    And regarding search in css, press Cmd+Shift+T and type in name of ID or class :)

  30. User Avatar
    Web Develpment India
    Permalink to comment#

    Nice video explanation for text-mate… Thanks for sharing

  31. User Avatar
    Permalink to comment#

    Nice video for beginners :)
    Search and replace shortcuts are very productive (see screencasts on macromates.com).

    @chris : 19:30 : Super fast way to do it is hitting CMD+SHIFT+T (go to symbol)

  32. User Avatar
    Permalink to comment#


    Nice video! Which tool did you use to make this video?

    Best regards.

  33. User Avatar
    Permalink to comment#

    Oh thank god! Finally I found a place that told me the hot key to activate the Zen Coding shortcuts on TextMate. This like, the 20th blog about Zen Coding I’ve looked at.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      It’s Command-E, for those using this as reference.

  34. User Avatar
    James Lau
    Permalink to comment#

    Textmate isn’t picking up any of the newer semantic codes from HTML5. Correct me if I am wrong, but when I plug for example ….. it won’t close itself off.

    Is there a plug-in/update for this?

    • User Avatar
      James Lau
      Permalink to comment#

      Sorry, forgot to add this…I can’t collapse those sections in Textmate and I want to know how I can enable that.

  35. User Avatar
    Rigel Glen
    Permalink to comment#

    Sparkup is more hip than Zen Coding http://goo.gl/eJ7e9

  36. User Avatar
    Permalink to comment#

    Great news, everyone! Macromates is coming out with a major upgrade (2.0) to TextMate – sweet! They do not have much in the way of details, as you see here: blog.macromates.com/#post-236

  37. User Avatar
    Permalink to comment#

    The video cannot be viewed now?

  38. User Avatar
    Permalink to comment#

    check this out, for pc user or linux user, this is textmate recharged
    every thing is a text file (preferences, snippet .. .. .. ..ect)


  39. User Avatar
    Paul Mason
    Permalink to comment#

    Great tutorial! Would love to see a similar one on NetBeans if you get the chance.

  40. User Avatar
    Joao Paulo
    Permalink to comment#

    Great tips. I want know if I can use TextMate with SVN? Im trying to do this a long time and I dont have progress. Can you help me? Thank you

  41. User Avatar
    Permalink to comment#

    Nothing is working your video doesn’t play and the download is a txt file that doesn’t open ?

  42. User Avatar

    hey Chris Thank you a lot for your great work, you are Helping a lot of people out there Greeting from Morocco Keep up the good work.

  43. User Avatar
    Mary Pieroszkiewicz

    Is it possible to have Monokai theme in Dreamweaver CS6 ?

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.