Keyboard-driven development: Could your new code editor be a tool from the ’90s?

April 13, 2021
Keyboard-driven development: Could your new code editor be a tool from the ’90s?

This is part one in our two-part blog on vim, a modal text editor optimized to perform the tasks you as a programmer will be doing a lot. Written with ❤️ by the Tools and Software Infrastructure (TSI) team at Microblink.

Ah, programming. The beautiful art of producing bug-free code on the first try, fuelled primarily by pizza and coffee.

Except that’s not really how it works.

While transforming abstract thoughts into a language machines can understand is our ultimate goal, we spend the majority of our time traversing the codebase, reading the docs and wondering how on earth to solve the problem at hand.

Not an easy task. You have to wrap your head around a lot of context and efficient code editing is vital in helping you understand what you’re looking at — and make the changes you need.

So if we’re already going down this career path which might span a few decades, investing a few weeks toward improving our editing and navigating speed seems like a solid tradeoff, right?

Introducing modal text editors

Modal text editors are essentially text editors that let you switch between different modes.

Think about it. In Notepad, you’re always in one mode — the insert mode, where pressing a letter makes it appear on the screen. In a modal text editor, you could be in six. That means six different outcomes resulting from the same press of a key.

Pretty good, right? Now, I know what you’re asking yourself. Could this mean you could edit code without ever touching your mouse?

You bet.

Making a case for vim

Vim is a modal text editor that becomes incredibly rewarding as you start to get the hang of it.

Also, for a tool that’s been around for 30 years, it stacks fairly well against its competition — in a 2019 Stack Overflow survey, vim was ranked fifth among the most popular IDEs. (1)

You can do many things with vim, more than we could ever cram into one blog post. So instead of doing a full-blown tutorial (you can get one by opening your terminal and typing vimtutor), we’ll take a look at some of the features you’ll likely be using the most.

Moving around

By default, vim starts in normal mode — this is how you navigate the editor. It’s also where you’ll spend most of your time (or should, at least).

  • Press h to move one character left
  • Press l to move one character right
  • Press k to move one row up
  • Press j to move one row down
  • Use w or b to jump to the next or previous word
  • Too slow? Press ctrl+d or ctrl+u to jump half a screen

With just these eight shortcuts, we’ve covered the majority of movements you’d make in non-modal editors.

Let’s now have some fun and add some text. To do that, we need to switch to insert mode.

There are a few ways where you can do this — you can press i to insert text before the cursor, a to insert it after the cursor or to insert in a new line. Uppercase versions of these characters will also text insert elsewhere (we’ll let you discover them on your own).

Once you want to go back to normal mode, simply hit the esc key.

Say goodbye to micro-interruptions

You might be wondering how learning these obscure shortcuts will benefit you in the first place? 

Well, for one, vim commands are very close to the home row of your keyboard.

A ‘home row’ is the center row of keys on a typewriter or computer keyboard, as shown in the image above. You can find it by touch as both f and j keys have small bumps on them.

The exception to this is the esc key, which is a relic from the past that once stood in the place now occupied by your Tab key.

This is not a problem, though. Just remap your caps lock key to esc. When the time comes to argue with someone on the internet, holding shift the entire time will do just fine.

Once you get used to navigating your file this way, you won’t have to take your hands off the home row ever again. Keyboard-driven development is faster — and let’s admit it — cooler than having to use your mouse.

Say you wanted to move the cursor over to a specific character in your line of code. Usually, you’d use your arrow keys or a mouse to get there.

With vim in normal mode, you can just type f<character> and get to the dot, comma or whatever else you’re looking for in a fraction of a second.

You can also move easily around the file itself:

  • Press % to jump to a matching bracket
  • Press { to move onto the previous empty line before a text block
  • Press } to move onto the next empty line after a text block
  • Need to find something? Press / to start a downward search or ? to start an upward search
  • Press <number>G to jump to a specific line of code (for example,1G will take you to the first line at top of the file, and G to the last one at the bottom of the file)

That was a lot to take in, so we’ll let you have a breather. To quit vim, press : to go in command mode and then type wq and hit enter.

Ready to modernize your workflow?

As a program, vim has a small footprint and low latency, starts up fast and lets you customize it to your needs.

Plus, there’s a strong chance your current IDE has a plugin for it. We recommend you get started with vim this way to keep the learning curve nice and smooth.

Oh, and before we go, let us come clean and say the title of this post is misleading.

All of the shortcuts we’ve shown you so far were actually a part of vim’s predecessor, vi, which was released in 1976! Vim, which stands for Vi iMproved, does come with syntax highlighting, multi-redos and a host of other handy features.

In part two, we’ll go over vim’s visual and command modes, look at how plugins work and get our feet wet with a real C++ project.

So go ahead — toss your mouse out the window and join us in a couple of weeks to find out how we can modernize our workflow with a program from the previous millennium.

Integrate ID verification into your existing application