This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.
I'm sure everyone can agree that the power and control afforded by a program like Vim is incredible. However, understandably, many aren't comfortable with the various modes, and the command-line feel of it. It's hard to compete, visually speaking, with a beautiful UI, like Espresso. But, what if we could take some of the more popular Vim commands/shortcuts, and manually port them over for use in Espresso? Wouldn't that be the best of both worlds?
You'll get the most from this tutorial if you have a modest familiarity with Vim and its syntax.
Let's get a few things straight, right off the bat. To Work with Vim is to work with a language; this is specifically why it's so powerful. Want to delete the next four words? Easy, type
c4w (change four words). What about the next two words? Well we know the syntax:
c2w. Hmm...what if I need to delete the next three lines from the cursor's position? Again, we don't have to memorize a separate keyboard command; we, instead, use the language:
3dd (delete the next three lines).
Our goal is to port as much of this functionality over to the popular editor, Espresso for Mac. The reason why this is Espresso specific is because we're going to use macros to mimic a handful of tasks for each command. The specific tasks/keyboard strokes will vary from editor to editor.
It's my hope that members of the community will begin creating their own ports for their favorite editors. At that point, we can developer a repository on Github.
We certainly can't port the entire language and its modes over to Espresso; that's impossible. But we can mimic many of the more popular commands with macros.
I suppose the answer to this question depends entirely on...you. When I began my 4 Weeks of Vim trial, back in September, I quickly fell in love with the modes and language. However, every editor has its advantages and disadvantages. In my case, though I still love and use Vim every day, I dislike how:
- Even with plugins, like NerdTREE, it's still difficult for me to work with large projects and folder structures.
- Working with files, via FTP, was more difficult than using Espresso.
- There's no denying that Vim can't be as pretty as a native Cocoa app.
- Espresso has a kick-butt live preview feature that can be enabled, in a new tab, simply by typing
Command + Option + P. Further, this window updates in real-time, as you type.
- I struggled to find adequate debugging utilities for Vim.
Recently, as I was playing around with keyboard macros, I asked myself if there was a way port this functionality. Maybe you'll love the idea; maybe you'll hate it.
While Vim is 100% free (that's part of its greatness), Espresso is not. Further, we're going to be creating keyboard macros with a program, called Keyboard Maestro. This, too, isn't free. I'm sure there are some open source macro-creation programs available around the web; however, this one is the best that I've been able to find. It's worth the $35.
To follow along, you'll need:
- A Mac
- A copy of MacRabbit's Espresso code editor. Again, you can use any editor; but the macros will differ slightly. Follow along with this tut, and then create your own editor's macros. (Next, let me know!)
- A copy of Keyboard Maestro. If you've never used it, you can download a fully working trial from their website. MacAppStorm has a great article on KeyBoard Maestro, if you need a primer.
Your First Macro
Let's begin with a simple Macro. Using Vim in
normal mode, we can type
ciw (change inner word) to delete the current word, and move into
Now, Espresso doesn't have
modes, but, as I found, that's okay. We can still type these commands; while they'll be entered as regular text, as soon as the macro triggers, they'll be deleted super fast.
So, for our first macro, we want to mimic this functionality. When the cursor is on top of a word, I want to quickly type
cw to change the word.
Umm...why not just hit the
Command + Shift + Wshortcut?
Yes, we could do that, but, in my opinion, we shouldn't.
- If every simple command has its own confusing modifier + key shortcut, it quickly becomes difficult to remember all of them.
- I love the language-aspect of Vim. Once you learn it, the idea of going back to pressing multiple modifider keys becomes a big pain.
- A big advantage to Vim is that it places great emphasis on keeping your fingers locked (as much as possible) to the center row of your keyboard. Not only does this allow you to type quicker, but you also don't have to stretch out your fingers every time you want to perform a simple operation.
When creating a new macro, the first step is to figure out how to perform the task manually in the code editor. In this case,
Shift + Command + W will select the word. Next, the
delete key, of course, will delete the word. Those two commands alone will mimic
ciw in Vim.
Fire up Keyboard Maestro
The next step is to create the macro. Fire up Keyboard Maestro, and, before anything else, create a new group specifically for your Vim commands.
This way, you can limit these shortcuts to only be applied to Espresso, and not, for instance, Microsoft Word. I've called my group, VimMimic.
Now, we need to create a new macro, set a trigger, and choose the expander.
If you're wondering why we're not using your existing TextExpander program, it's because programs like that only expand text. But, we need to perform macros, or tasks.
Recording the Macro
With the preparation out of the way, now we need to record our steps. While Keyboard Maestro has numerous folders/commands available to you, what's awesome is that it offers a "Record" button, where it'll listen and record any keys you type, mouse movements/clicks, etc.
If you need to, go back to Espresso, and memorize the keys/commands you need to type in order to change the word. However, be smart about this. For example, should your macro select something like
sheldon.couper in its entirety? Or do you want it to select only the word, up to (or after) the period? In Espresso,
Command + Shift + W will perform the latter. Decide for yourself on this one. I think, I'll do the former and select everything.
In that case, I need to be smarter about the macro. After a bit of toying around, this is what I came up with.
If you want, create a second macro,
ciw (change inner word), that will only select before or after the period as well.
Trying it Out
Once you've completed your macro, try it out! Return to Espresso, and, once the cursor is over a word, type
cw. This will then trigger the macro, in which all of your previously recorded actions will be played out, in high-speed.
I'm hoping that there's a way to perform a macro without updating the UI until the very end. But, I'm not aware of how to do so at this time.
A Whole Lotta Work
If you're not a Vim user, I'd expect you to think to yourself, "All of that work just to delete a word?" And, trust me, I understand. What I can tell you, though, is that, once you've used Vim for a while, a language-like syntax makes far more sense to you, than memorizing countless modifier key shortcuts.
And, granted, this is a very minimal example.
j for Down;
k for Up
The first time I learned that I was expected to use the letters to move up, down, left, and right (
kjhl), I laughed. How old-fashioned is that!? But, once you've committed the keys to muscle memory, your speed increases. No longer do you have to drag your right hand to the bottom-right section of the keyboard to hit the down arrow key. Nope - your hands remain in resting position, as those keys lie directly in the second row.
modes to switch between commands and inserting text. But, as mentioned above, Espresso doesn't have these. So, we'll use the
Caps Lock key to serve as our
Rerouting the Caps Lock Key
Ask yourself, "How often do I ever use the
caps lock key?" If you're like me, the answer is, "Almost never." With that in mind, get some use out of it, and reroute its function. On a Mac, this is simple.
System Preferences -> Keyboard -> Modifier Keys, and change the
Caps Lock to route to the
Control key, which I always have trouble targeting when I'm typing (at least on my laptop).
Now, any time that you press
caps lock, the
control key will be triggered.
Create a new Macro
This one is laughably simple, but it works. Now, when you type
Caps Lock + J, the down arrow will be triggered. It's important to keep in mind that you're not forced to use this, if you don't want to. You can still press the down arrow key. But, for those who feel more comfortable keeping their hands in resting position, this might be preferred.
Repeat for Every Direction
Your next step is to repeat the cycle for up, left, and right -- using the exact same method.
Vim has a nice command,
ci' that allows you to empty the contents of the next string, wrapped in single quotes. It's amazingly helpful, and can really speed up your coding.
Let's try to create a macro to do this in Espresso. This one will be more complicated, because we have to use the find tool in Espresso to search for the next occurrence of a single quote. So, the solution won't be perfect, but it'll get the job done partially.
Try it out for yourself. Anywhere in your document, type
cn'. Unfortunately, at least for now, it only works perfectly for single words wrapped in quotes.
Change Until the End of Line
In Vim, if you type a capital
C, in normal mode, it'll delete all of the text on a line that comes after the cursor's position. It's very helpful. We can do the same in Espresso with a simple macro. However,
Shift + C won't work, because Espresso doesn't have
modes. Let's do
Caps Lock + C instead. Remember, caps now routes to the
Delete Surrounding Tag
In Vim, with the Surround plugin, I can type
dst (delete surrounding tag) to delete a wrapping tag. I use it often. Hmm - this will be a trickier one in Espresso, but it can be done. Here's what I came up with; try it out on your machine.
It's a bit more complicated, but it works!
Note that, if it seems like a few of those actions can be removed, they're there because I found odd situations where they were needed. Better to be safe.
Change Surrounding Tag
Equally as useful as deleting the surrounding tag, is changing the tag name.
There's one quirk about this particular method. Because Espresso isn't mode-based, when you change the tag, this command will take you up until the point where you can change the value of the tag. Once you do, simply press
Right, and paste in the original text (that was copied by the macro). You'll see what I mean when you try it out. Let me know if Espresso has a built in change-tag-name command.
Okay, that should get you started. If you're a Premium member, be sure to refer to the video portion of this tutorial for a more one-on-one demonstration. I've created a repository at Github, which contains dozens of commands that you're free to use (and improve) how you wish.
Things to be Wary Of
- Don't choose shortcuts that you would type normally. For example, using
ddto delete a line will screw things up every time you type "kidding."
- Be careful of overriding built in commands. This is always tough; it may take some trial and error to find the most non-intrusive shortcuts.
So, what do you think? Do you like the idea? I'm curious, though I fit into the latter camp.
The Keyboard Maestro macros group is constantly being updated. To download the most up-to-date version, please get it here: http://github.com/JeffreyWay/VimMimic-for-Espresso