#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:
Running Time: 20:52
Direct Download: High Quality, Quicktime .M4V Format (AppleTV Ready)
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.
A TextMate alternative for pc is E-TextEditor, it even supports TextMate bundles. BTW thanks for the screencast Chris!
Sweet, I might have to look into that.
U Should look this accept the bundles and themes, and work very well.
I agree, E-TextEditor is awesome! I switched from Notepad++ and never looked back.
Yeah, E-TextEditor is awesome. It has great TextMate compatibility. http://www.e-texteditor.com/
E also has FTP support. So maybe it’s time to get off the Mac. eloel
Another alternative to TextMate if you are on a PC is Sublime http://www.sublimetext.com/
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.
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.
Nice one I have been trying different text editors for a while. I will give RapidPHP 2010 a bash now!
Jamie,
You ought to try UltraEdit, it’s my favorite windows text editor. It’s lightweight and has FTP support.
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.)
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.
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?
Super stud! Thanks man.
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.
“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.
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.
Hey, thanks for mentioning my bundles ;)
There’s indeed a lot more you can do with those bundles… For instance, for “text-transform: uppercase;” try typing “ttu” and then tab…
This video might help, although some of it is outdated (used to be HTML bundle instead of its own mHTML bundle…) and I need to make it much shorter and work on my english ;)
http://minimaldesign.net/uploads/screencasts/html_css_textmate_bundles.mov
Chris, you should check out Yoast’s WordPress TextMate Bundle. http://yoast.com/tools/textmate/
Chris,
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
Chris
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
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
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
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.
I like netbeans
Hi,
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 :)
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.
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?
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.
Brilliant screencast! It’s going to re-ignite my personal TextMate vs. Coda debate…
I hate these Mac-specific screencasts. No use for windows people! :(
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.
Another cool screencast Chris!
Eventhough I use Coda time to time for direct server edits, TextMate is my all time favorite. :)
I’d like to share some tips you missed.
You can do a quick search through document by pressing Ctrl + S.
I only use the find dialog box when I need to replace some texts.
I use follwing themes interchagablly.
1. Railscasts
http://media.railscasts.com/resources/textmate_theme.zip
2. Monokai
http://www.monokai.nl/blog/2006/07/15/textmate-color-theme/
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.
its css
#el {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
}
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.
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.
My favourite is Komodo edit:
http://www.activestate.com/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.
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.
http://macrabbit.com/espresso/
Try Espresso with TEA (Text Editor Actions) and the HTMLBundle.sugar and it’s excellent. http://onecrayon.com/tea/
http://onecrayon.com/products/htmlbundle/
One Crayon and others have this stuff for Coda too.
http://onecrayon.com/tea/coda/
http://www.panic.com/coda/developer/community/plugins.php
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.
Argh! This is persuading me to move away from Coda and towards TextMate. Do a similar thing for Coda! ;)
Here are a few quick tips that I find really helpful.
http://screenr.com/28O
Super nice extension Baylor. Literally everything was new to me.
I used to use TextMate and Coda, but MacRabbit has done an excellent job on Espresso. Use it with TEA (Text Editor Actions) and the HTMLBundle.sugar (both found at One Crayon), and it’s awesome. Espresso has a great interface and “feel”, it’s just a joy to use.
Of course Panic is working hard on the new version of Coda, so it’s sure possible I could switch back. But until then, Espresso is where it’s at.
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!
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
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!
Thanks Daniel…worked like a charm. I appreciate it!
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.
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.
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
zen coding is relay speed up to build your site
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
Thanks for the share. LT
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 :)
Nice video explanation for text-mate… Thanks for sharing
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)
Hey,
Nice video! Which tool did you use to make this video?
Best regards.
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.
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?
Sorry, forgot to add this…I can’t collapse those sections in Textmate and I want to know how I can enable that.