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
keyis 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
esckey 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