The perfect match for a fantastic development experience 🙌 For a long time, I have listened to people gushing about . I always respected their opinion, but in the end, I still refused to give Vim a try. Vim 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 , we often move the cursor to navigate between lines. We jump from line to line or move forward and backward inside them. coding 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 , , and key. H J K L This movement may look strange in the first place. But trust me once you get used to it it feels natural. or medium to get notified about my newest blog posts!🐥 Follow me on Twitter 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 of brown. b Typing would place the cursor on fb b The quick brown fox jumps over the lazy dog.          ^ would put the cursor before tb 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 you can hop to the next result and with back to the previous match. / n N So if you want to hop to of just type . own brown fox /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 and the command. By pressing this key combination, we tell Vim to cut everything until the and switch into insert mode. c t + character ) It is just a small use case of the power this tool gives you. You can now combine all the movements and commands. ** **Great! Just type Want to select everything from the current position to the end of the file? Press the following combination on the of the method body. Want to delete the method body? { Just type the following on the variable: Want to copy a 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 plugin. IdeaVim 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 and click on install. The installation then requires you to restart WebStorm. IdeaVim 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 key. While there is nothing wrong by using the key there are reasons you may consider mapping a key of our choice to this functionality. esc esc In my opinion, the esc 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. key I am using a new MacBook Pro with a touch bar. The touch bar’s 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. esc IdeaVim allows you to map a custom key to the functionality go to an type in the search field. exit and insert Preferences “exit insert” Double click on “ ”. Choose “ ” and then hit your preferred stroke to add it as your “ ” key. Exit Insert Mode Add Keyboard Shortcut Exit Insert Mode 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. _Alternate approaches to handle source maps_blog.angularindepth.com Debug Angular apps in production without revealing source maps _Different approaches with their pros and cons_medium.com Angular: Refetch data on same URL navigation _How inheritance in Typescript actually works behind the curtain?_hackernoon.com Typescript inheritance deep dive 🐋

Twitter

Too Long; Didn't Read

Making security fun one episode at a time

Enhance your IDE with Vim

Too Long; Didn't Read

Company Mentioned

Kevin Kreuzer

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Enhance your IDE with Vim

Too Long; Didn't Read

Company Mentioned

Kevin Kreuzer

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES