My Experience Using Vim Keybindings In VSCode

This might be a very controversial blog because many developers have different opinions about VIM. On one side, you have many people arguing that modern IDE’s are so powerful, and come feature packed with tools and shortcuts that make programming blazing fast. On the other side, there are die-hard VIM users making the case for vim superiority due to its powerful commands and presence in every Linux machine.

As a young developer, anything that can grant me a speed advantage in coding is always going to interest me, and plus, it’s something new to learn, and learning is a life goal. I’ve always heard that once you get comfortable using VIM, it speeds up your coding tremendously. It allows you to keep your fingers on the home row of your keyboard instead of switching between the mouse/arrow keys and keyboard constantly. I was always hesitant to give it a try because I’ve had a bad experience with it in the past.

Story time

Around 2 years ago, I transitioned from Windows over to Linux because I was tired of the bloat and the constant updates that would reset my privacy settings. I loved everything about Linux except for the one time I had to edit a file with vi (this was before I found out about nano). I’m sure many vim users know where I’m going with this… I was stuck inside my terminal trying to edit a file but nothing was showing up on the screen. Then once I hit some random keys, text started showing up and I thought everything was going to be fine… until I tried exiting.

@iamdevloper on Twitter

This experience drove me away from vi/vim and I happily moved on with my Linux life using only Nano.

Fast forward to a few months ago, I came across a blog on “Boosting Your Coding Fu With VSCode and VIM” by Jaime González García on barbarianmeetscoding.com. Reading all the positive things he said about VIM in VSCode made me really curious so I decided to give it a try regardless of that bad experience.

Vim Extension in VSCode

The vscodevim extension in VSCode combines the best of both worlds, powerful tools from a modern IDE and the blazing fast commands from Vim. It also has a bunch of configurable settings to customize anything from shortcuts to status bar color indicators. Here’s a list of all the features currently available for the extension!

Learning Vim Commands

It’s been a few months since I’ve started using Vim with VSCode and I’m still not a pro yet, but I’ve improved significantly compared to when I’ve first started. One of the main things that worked for me was using vimtutor a few times a week to practice the commands. It’s a command line app that comes preinstalled with vim in most Unix operating systems. Just open up a terminal and run vimtutor. Each run thought takes about 20–30 minutes and teaches the basics to help build muscle memory. Also, another helpful technique was having a Vim commands cheat sheet opened to the side whenever I was coding.

vimtutor

My Vim VSCode Settings

A lot of these settings are the ones suggested by the extension’s home page.

  "vim.easymotion": true,
  "vim.incsearch": true,
  "vim.useSystemClipboard": true,
  "vim.hlsearch": true,
  "vim.insertModeKeyBindings": [
    {
      "before": ["j", "j"],
      "after": ["<Esc>"]
    }
  ],
  "vim.leader": "<space>",
  "vim.handleKeys": {
    "<C-a>": false,
    "<C-f>": false
  },
  "vim.normalModeKeyBindingsNonRecursive": [
    {
      "before": [":"],
      "commands": ["workbench.action.showCommands"]
    }
  ],
  "vim.visualModeKeyBindingsNonRecursive": [
    {
      "before": [">"],
      "commands": ["editor.action.indentLines"]
    },
    {
      "before": ["<"],
      "commands": ["editor.action.outdentLines"]
    },
    {
      "before": ["p"],
      "after": ["p", "g", "v", "y"]
    }
  ],
  "vim.statusBarColorControl": true,
  "vim.statusBarColors.normal": ["#8FBCBB", "#000"],
  "vim.statusBarColors.insert": ["#BF616A", "#000"],
  "vim.statusBarColors.visual": ["#B48EAD", "#000"],
  "vim.statusBarColors.visualline": ["#B48EAD", "#000"],
  "vim.statusBarColors.visualblock": ["#A3BE8C", "#000"],
  "vim.statusBarColors.replace": "#D08770",
  "vim.statusBarColors.commandlineinprogress": "#007ACC",
  "vim.statusBarColors.searchinprogressmode": "#007ACC",
  "vim.statusBarColors.easymotionmode": "#007ACC",
  "vim.statusBarColors.easymotioninputmode": "#007ACC",
  "vim.statusBarColors.surroundinputmode": "#007ACC",
  "workbench.colorCustomizations": {
    "statusBar.background": "#B48EAD",
    "statusBar.noFolderBackground": "#B48EAD",
    "statusBar.debuggingBackground": "#B48EAD",
    "statusBar.foreground": "#000"
  }

I also binded the autosuggestion navigation button to ctrl + hjkl by pasting this in the keybindings.json file.

{
  "key": "ctrl+j",
  "command": "selectNextSuggestion",
  "when": "suggestWidgetVisible"
},
{
  "key": "ctrl+k",
  "command": "selectPrevSuggestion",
  "when": "suggestWidgetVisible"
},{
  "key": "ctrl+j",
  "command": "workbench.action.quickOpenSelectNext",
  "when": "inQuickOpen"
},
{
  "key": "ctrl+k",
  "command": "workbench.action.quickOpenSelectPrevious",
  "when": "inQuickOpen"
}

Some Of My Fav Commands

• using w, e, b to jump from word to word
• ciw to delete word and switch into insert mode
• cit to delete everything between tags and switch into insert mode
• ci" or ci' to delete everything inbetween quotes and switch into insert mode
• making a change then n to jump to next encounter, then . to repeat change
• 2dd to delete 2 lines, 3dd delete 3 lines, 3dd….
• 2j/2k jump down/up 2 lines, 10j/10k to jump down/up 10 lines, etc
• ctrl + v for visual block mode, v visual mode, V visual line mode
• o or O for new line, A insert at end of line, I insert at beginning
• /pattern searches for similar pattern, n to repeat search, N repeat search opposite direction

There are many commands out there. I will include a cheat sheet at the end of the blog.

Final Thoughts

Some of you might be curious and wondering if you should learn it. My answer would be… Only if you want to. There’s absolutely no harm in learning it, and it might even make you faster and more efficient. At the end of the day, it’s about finding the set of tools that benefits you the most. You can always try it out though vimtutor first and decide if it’s right for you.

Many modern IDEs like VSCode already come feature packed with tools and shortcuts that speeds up development. Vim shortcuts in VSCode adds another layer of tools and shortcuts that can be very beneficial for development, it combines the best of both worlds. My favorite part about it is the ability to code for an extended period of time without lifting my hands off the keyboard.

Resources

Boost Your Coding Fu With Visual Studio Code and Vim | Barbarian Meets Coding

Boost Your Coding Fu With VSCode and Vim - The Book | Barbarian Meets Coding

Vim Cheat Sheet