A Few of My Favourite Vim Keybindings

Written on 2024-03-01 by Adam Drake - 5 min read

I’m a convert. I was raised as a devout VSCode disciple and we had some wonderful times together. It allowed me to explore the Javascript landscape, dabble with a bit of Java, express myself with Python and hone my all-round skills as a developer. But there was always something in the back of my mind, deep in the recesses, right at the back at the bottom, that just wasn’t quite satisfied with the whole VSCode experience.

There was always something in the back of my mind, deep in the recesses, right at the back at the bottom, that just wasn’t quite satisfied with the whole VSCode experience

Then, maybe through chance or just pure dump luck, I stumbled upon Vim. At first I thought it was a joke. How could someone work in this editor? It took me ages just to find out how to save a file! But over time as I was exposed to more and more of it’s little nuances and small delights I gradually made the switch. (I still harbour some guilt about abandoning the VSCode juggernaut but I am sure some big $$ spent in therapy will help at least remedy part of that.)

For all you non-converts who think Vim is the Jehovah Witness of the Text Editing world, I wanted to share with you just a few of the super-cool-keybindings that Vim brings to the table. Maybe it will open your eyes to another side of things. Maybe it will convince you to take the jump. Maybe it will shatter the illusion of VSCode adoration. Maybe…

ciw

I’m going to start with one of my personal favourites -ciw What this does is when you have your cursor in a word (say a variable name) and you are in NORMAL mode this handy little shortcut will select the whole word, delete it and then put you straight away in INSERT mode…

Selecting a whole word and then deleting it and entering INSERT mode — ciw

I use this keybinding throughout the day. Especially for renaming variables, or updating a type on a particular Prop It’s the equivalent of pressing cmd + d and then del in VSCode.

o (Shift + o)

When pressing this keybinding in NORMAL mode the cursor either jumps to the line below (o) or the line above (shift + o) and changes to INSERT mode. This enables you to immediately start typing. As a bonus it indents automatically to the right place.

Creating a new line and entering INSERT mode — o

{ or }

This was one of my main issues with VSCode. Quickly navigating up and down in a file using just the keyboard wasn’t possible. You either had to hold the up or down arrows or press ctrl + g and then type in the line number you wish to jump to. It really annoyed me.

With { or } you jump up or down to the next available blank line. I work mostly in React so there are enough blank lines within a file to make this very useful. I can open a file and navigate quickly to the line I want to just using these handy keys.

di or ci or yi followed by “ or ‘ or { or (

When I found out about the power of i I was blown away. I understand it as inside but I am not 100% sure that is true. I will show you this example… imagine you have this line of code:

const amazingString = "This is an amazing string";

If you want to change the string inside the " then all you have to do is put the cursor inside the quotes and press ci" This will essentially delete everything inside the " and then put the editor in INSERT mode so you can start typing the replacement string. c is change mode, i is inside (maybe) and the " is the symbol where this should take place.

The same thing would be if you had:

const object = { monkey: "Michal" }

and you pressed ci{ when the cursor was in the {} object. It would remove all the contents inside the {} and put the editor in INSERT mode to start entering the new content.

shift + a — (A)

This is a nice one. If you have your cursor on a line and you press shift + a when in NORMAL mode the cursor will jump to the end of the line and change straight away to INSERT mode. Very handy in coding as very ofter you want to go to the end of the line of code and do something.

Conclusion

Vim has many key bindings out the box which are so useful, not to mention the possibilities when you start making your own. Many of the keybindings really seem to be tailored to what a developer needs when manipulating code. It shows that quite a bit of thought when into the design of Vim.

Being able to quickly and succinctly edit the code to represent your thoughts is integral to the success of a developer. So if you can use a tool designed to facilitate this it’s your responsibility to utilise this tool to the maximum. Knowing all the keybindings is just the start.

Tweet this article Discuss on Twitter

Written by Adam Drake

Adam Drake is a Frontend React Developer who is very passionate about the quality of the web. He lives with his wife and three children in Prague in the Czech Republic.