Enhance your IDE with Vim

The perfect match for a fantastic development experience 🙌

For a long time, I have listened to people gushing about Vim. I always respected their opinion, but in the end, I still refused to give Vim a try.

My experiences with Vim were just too painful. It was surreal to imagine how it could increase my productivity.

After listening to another Vim enthusiast, I finally rolled up my sleeves and decided to give Vim a try. 💪 And guess what — it was an excellent decision.

Don’t get me wrong.

I am not a hardcore Vim user that knows all commands and has a lot of plugins installed. I also would not want to code with plain Vim.

But combined with an IDE of your choice, Vim is a perfect tool!

Getting started with Vim 🚀

To get started with Vim I first took a couple of hours to go through the Vim tutor.

Vim tutor is Vim’s interactive beginner tutorial. To start this tutorial just open a terminal and type _vimtutor_.

The Vim tutor gave me a first impression of how powerful Vim might be if you master it. On the other side, I also learned that it’s going to take some time to get used to the different modes.

After the first couple of hours, I realized that Vim doesn’t contain a learning curve, it’s more of a wall. 😬

But this should not break my motivation.

The perspective on much more efficiency as well as the desire to get to know Vim to be able to judge it on my own experiences, kept me going.

To get familiar with Vim I needed more than just the Tutor. I recognized that there’s only one way to learn Vim.

I decided to include Vim in my daily workflow for one month.

One month where I was prepared to be less productive and to have steady nerves. Of course, I did not tell my product owner about my glorious plan 😅

One and a half year later Vim is still integrated into my daily workflow, and I would never want to code without it. 😎

Here’s why.

Why Vim?

The main argument for Vim is its high-speed editing power. It allows you to edit text intuitively and powerfully.

Vim contains many functionalities. Too many to cover in one blog post. Every day I use Vim I learn something new or read about a new feature I never heard of before.

This blog isn’t a Vim tutorial — it’s about showing it’s power. Therefore I will only list the features I use the most.

Moving the cursor around ⛵

During coding, we often move the cursor to navigate between lines. We jump from line to line or move forward and backward inside them.

We usually need our arrow keys to move around which enforces us to move our entire hand away from our current position.

Additionally, if you use a new MacBook, the arrow keys (especially the up and down keys) are tiny.

Vim allows us to navigate without losing the current hand position. We can quickly move around using the H, J, K and L key.

This movement may look strange in the first place. But trust me once you get used to it it feels natural.

Follow me on Twitter or medium to get notified about my newest blog posts!🐥

Advanced Movements

Besides those simple up, down, left and right navigations, Vim offers us more ways to navigate.

We can use commands to navigate. Mostly only one character is required to perform navigation.

So let’s have a look at the following picture which visualizes some of the commands. An operation executes relative to the cursor position.

While the commands above are all executed on one line, there are also commands that allow us to navigate on blocks or the whole file.

%

Press this on a bracket. The cursor jumps to the corresponding closing bracket.

G

Jump to end of the file.

gg

Jump to the beginning of a file.

Move to a specific character or word

This feature is pretty awesome because it allows you to hop to custom positions inside a line or file.

To hop to a letter, you can type one of the following commands:

f + character or t + character

Let’s first have a look at some examples to illustrate what this command does. Have a look at the next line:

The quick brown fox jumps over the lazy dog.

Let’s say our cursor is at the beginning of the line and we want to jump to the b of brown.

Typing fb would place the cursor on b

The quick brown fox jumps over the lazy dog.          ^

tb would put the cursor before b

The quick brown fox jumps over the lazy dog.         ^

Search with /

Vim has an integrated search. You can search for any word by typing / followed by the word. With n you can hop to the next result and with N back to the previous match.

So if you want to hop to own of brown fox just type /own .

Vim operations

Copy, cut and paste commands can efficiently be executed with one Keystroke in normal mode.

c

Use this command to cut the current selection and change to insert mode.

d

Use this command to delete the current selection.

v

Use this command to select.

y (yank)

Use this command to copy.

p

paste the current selection

Combine operations with movements 😍

Vim allows us to use to combine what we have learned above. The combination of those things enables editing innovatively and uniquely.

The combination of commands and movements is where Vim really shines and outpaces the competition.

So let’s have at a real-world example to illustrate how combination work. Let’s assume we have the following method:

public test(foo: string, bar: string): void {}

We now want to change the method’s signature which is something we use quite often during programming.

So in any non-Vim enabled IDE, I would probably press the Shift key in combination with 23 left arrow keystrokes.🙄 Or even worse — I would use the mouse.

So let’s do the same with Vim and only three keystrokes.

We combine the c and the t + character command. By pressing this key combination, we tell Vim to cut everything until the ) and switch into insert mode.

It is just a small use case of the power this tool gives you. You can now combine all the movements and commands.

**Want to select everything from the current position to the end of the file?**Great! Just type

Want to delete the method body? Press the following combination on the { of the method body.

Want to copy a variable? Just type the following on the variable:

And so on. You get the point. 😉

You can combine all those commands. The cheat sheet above gives you an even better overview of the commands and how powerful Vim is.

Enable the force! Integrate Vim in your IDE 🙌

Most IDEs allow you to have some Vim emulation. It’s not possible to cover the setup for all the IDEs — therefore I show you how to do it in my favorite one, Webstorm! 😉

In case you use another IDE anyway consider to read along. Besides the setup, we also look at some tips and tricks that might also be useful for your IDE.

Webstorm is such a powerful IDE with wonderful features and plugins. It is an amazing tool. Combining it with Vim gives us a very unique and fantastic development experience.

Setup Vim in Webstorm

To use an emulated Vim inside Webstorm, we are going to install the IdeaVim plugin.

IdeaVim is a Vim emulation plugin for IDEs based on the IntelliJ platform. IdeaVim can be used with IntelliJ IDEA, PyCharm, CLion, PhpStorm, WebStorm, RubyMine, AppCode, DataGrip, GoLand, Cursive, and Android Studio.

To install it go to:

Webstorm > Preferences > Plugins > Browse Repositories

Search for IdeaVim and click on install. The installation then requires you to restart WebStorm.

You are now ready to use the Vim emulation inside WebStorm.

Useful tips while using a Vim emulation

Create Keymap — choose IDE or Vim handler

Some plugins like the IdeaVim plugin allow you to create your Keymap. You can decide if you want to use WebStorms shortcuts or the Vim shortcuts.

To setup the Keymap in Webstorm go to Preferences > Vim Emulation

Here you can choose which shortcuts are used.

Custom key to exit insert mode

Exiting insert mode is quite essential in Vim. It’s the purpose of the esc key. While there is nothing wrong by using the esc key there are reasons you may consider mapping a key of our choice to this functionality.

• In my opinion, the esc key is quite far away. I always need to move my hand to access the esc key. By doing so, I lose the initial hand position on my keyboard.
• I am using a new MacBook Pro with a touch bar. The touch bar’s esc key is not a physical key. It’s a virtual key. Hitting it doesn’t feel natural and doesn’t give feedback. For me, the touch bar is, therefore, a killer criteria when I use Vim without a custom key to exit insert mode.

IdeaVim allows you to map a custom key to the functionality exit and insert go to Preferences an type “exit insert” in the search field.

Double click on “Exit Insert Mode”. Choose “Add Keyboard Shortcut” and then hit your preferred stroke to add it as your “Exit Insert Mode” key.

You can now exit the insert mode by pressing your newly added key.

Conclusion

Getting familiar with Vim requires some time and practice. But in the end, it is such a unique and fantastic tool that enables fast editing like no other editor.

Almost all editors allow you to emulate Vim in some way. Consider adding a custom keymap or a custom key to exit insert mode.

Last but not least; Enjoy a unique, fast, mouseless and intuitive way of editing code. 😍

🙏 Please give some claps by clicking on the clap 👏🏻 button below if you enjoyed this post.‍‍🧞

Claps help other people finding it and encourage me to write more posts

Feel free to check out some of my other articles about Front End development.

Debug Angular apps in production without revealing source maps_Alternate approaches to handle source maps_blog.angularindepth.com

Angular: Refetch data on same URL navigation_Different approaches with their pros and cons_medium.com

Typescript inheritance deep dive 🐋_How inheritance in Typescript actually works behind the curtain?_hackernoon.com