Cyberduck + Textmate = Awesome

I’ve been using EditPad Pro for web development on a Windows PC because it has an integrated FTP tool. With EditPad Pro, you can ftp to your production web server, list all of the files and easily edit any of them in place (code highlighting and all). I got used to the tool, but could never find a good equivalent for the Mac. TextMate is my favorite code editor in OSX, but it’s missing the FTP tool.

Then last week I stumbled upon a tutorial involving Cyberduck and Textmate and using the two in concert to accomplish exactly what I’d been using EditPad Pro for on Windows. It’s a straightforward set of text instructions that worked great for me, but I figured I could spruce it up with screenshots and my own tweaks so all my friends could use it too.

Here it is:
[step 1] Fire up Cyberduck and in the preferences under Editor, make sure external editor is set to TextMate. Also, under Browser, tick the “Double click opens file in external editor” checkbox.

[step 2] Connect to your web server via Cyberduck. Open up any file in TextMate by double-clicking it. Once the file is open, type ctrl+shift+o. This will open a terminal window at the temporary location where the file you are editing is. In the terminal window type “cd ..” to go up one directory and then type “mate .” to open the entire directory as a project.

[step 3] Now any subsequent files you open using Cyberduck will be added as tabs in the current TextMate project.

[step 4] Finally, the one thing I still miss about EditPad (Notepad++) is HTML Tag matching. There’s nothing like quickly being able to find the matching </div> tag to make your development go faster. Here’s how to do it in TextMate.

[step 4a] Download the Select Balanced (HT|X)ML Tags.tmMacro (I just saved the link as a .tmMacro file). Double-click the file to install it.

[step 4b] Place your cursor into a tag, then hit “Command+Shift+B” to find the matching tag and highlight the text in between.