Barbarian Meets Coding

presents

Boost Your Coding Fu With VSCode and Vim
Chapter 5.Table of ContentsCheatsheet

Your First Baby Steps in Vim

Rectangle shaped cursor… Curious! If you try to type text right now you will be surprised to see that nothing happens. Or to be more precise, nothing that you would have expected to happen, happens. For one, as you type on the keyboard, there are no characters being reflected on the screen. In fact, it is likely that in your typing, you’ll stumble upon some special meaning command that will either send your cursor flying around the screen or even delete or edit some code.

All of this weird and unexpected behavior is the result of Normal mode, the default mode in which you interact with code in Vim. And, in Normal mode, one does not insert text.

So What is Normal mode? And, moreover, What does mode even mean?

Normal mode in VSCodeVim

See that --NORMAL-- in your status bar? That's VSCodeVim telling you that you're in Normal mode.

Modes in Vim

Modes are one of the most important and impactful design decisions in Vim, so it pays off to spend a little bit of time to really understand what modes mean and how they affect the Vim developer experience.

Vim modes follow the same principle of wearing the right hat for the right situation. Depending on the task at hand, you may (figuratively) wear the right hat to best adapt your way of thinking, behavior and mindset to that situation. For instance, if you are trying to solve a problem in novel ways, you may want to wear an explorer cap that brings forth your exploratory mindset. If you want to be fearless and daring in an uncomfortable situation, you’ll wear a viking’s helmet. Diplomatic? A courtier’s hat, etc.

In a similar way, the Vim editor has different modes that best adapt to fulfilling different tasks. For example, these are three of the most common modes in Vim:

Some Modes in Vim

Just like wearing the right hat, when using Vim you’ll use the Insert mode when your goal is to insert text. You’ll use Normal mode when your goal is to edit text or navigate through your codebase, and you’ll use Visual mode when you want to select some text.

But what do modes mean exactly? What does adapting to the task at hand mean in the context of a text editor?

In essence, it means that your keyboard gains different capabilities depending on the mode you’re in. That is, depending on the mode you’re in, typing a key in your keyboard will lead to different results adapted to that particular mode. Take the letter w, for instance. Type w in any of these modes and this is what will happen:

How typing the letter w affects Vim in different modes
  • In Insert mode you will type the letter w, just like in any other editor.
  • In Normal mode you’ll move the cursor to the beginning of the next word.
  • In Visual mode you will select text up until and including the beginning of the next word

So What do we gain from Vim being a modal editor?

Thanks to the existence of modes, the keyboard becomes a blank slate in every different one of them. Which means that Vim is free to entirely adapt the keyboard to be the most effective to perform the task at hand, having your desired functionality right at your fingertips. As a result, and unlike other non-modal editors, Vim doesn’t need to rely on crazy key combinations (CTRL+ALT+SHIT+something). That means that you’ll be faster, you’ll be more effective and you will keep the health of your wrists and fingers far longer.

Yes. You are in Normal mode. In this mode you don’t insert text. Instead, you move around and edit it. This design decision stems from the realization that we spend far more time reading, navigating and changing code that we do inserting it in the first place.

Normal mode

So Normal mode is the default mode in Vim (as opposed to Insert mode, which is the default and only mode in most other editors). In Normal mode you don’t insert text. Instead, you move around and edit it. This design decision stems from the realization that we spend far more time reading, navigating and changing code that we do inserting it in the first place.

Normal mode can feel like a hostile place at first, as typing any key can and will result in unexpected behavior. So it helps to come into Normal mode with a little preparation. These are the very basics you need to survive and start building your Vim skills:

  • Move around with the hjkl keys.
  • Go into Insert mode with i where you can type stuff as usual.
  • Go back to Normal mode with <ESC>, <CTRL-C> or <CTRL-[>.

The Most Basic of Vim Motions

hjkl are the core and most basic motions in Vim. They allow you to move the cursor by one space in every direction:

Moving around in Vim with hjkl

They are not the most effective, nor the most efficient way to move around in Vim. But they do give you agility and confidence to move around a file in Normal mode. Learning to hjkl effectively is the equivalent of learning to walk, or learning to ride a bike.

After you get comfortable with more Vim motions you won’t use hjkl as much, but they’ll come very handy for short-distance movements and small corrections. j and k are also very useful within the file explorer, the command palette and the Go To panes as they allow you to move up and down and select different items.

From Normal Mode to Insert Mode and Back

Going from normal mode to insert mode and back

The i key lets you go into Insert mode after the cursor. At the beginning of your journey into Vim, you can see i as a escape hatch into sanity. If you ever feel stressed out and like you’re not making any progress you are welcome to type i, jump into Insert mode into a world where your editor behaves as it did prior to installing Vim.

When you feel like you have your energy and enthusiasm back up, you can type <ESC>, <CTRL-C> or <CTRL-[> and you’ll be back to Normal mode where you edit and navigate your code. As you gain confidence and learn more commands, you’ll find that you will spend more and more of your time in Normal mode, only dropping into Insert mode for precise, tactical text editing assaults.

<ESC> and <CTRL-[> can be uncomfortable to type, so I tend to recommend that you use <CTRL-C>. And since you’ll be using the CTRL key quite often (although not as often as with other editors) I recommend that you follow this tip:

An Important Note For Windows and Linux Users

Wait… <CTRL-C> to get back to Normal mode? Isn’t that what I’ve been using all my life to copy stuff???

Installing VSCodeVim has a couple of side-effects. One is that you get that weird squarish thingie cursor we have just discussed, and the other is that some commonly used keys are remapped to their natural fuction in the land of Vim. For instance:

  • <CTRL-C> no longer copies, and instead it sends you back to Normal mode. The command that we use in Vim for copying is far less verbose: y (for yank).
  • <CTRL-V> no longer pastes and instead sends you into Visual-block mode. Again, the command we use in Vim for pasting is less verbose: Just a single p (for paste).
  • <CTRL-F> no longer lets you search, and instead it allows you to scroll your screen one page forward. Once more, the command we use in Vim for searching is closer to your fingertips: /{term-i-am-searching-for}.

Depending on how adventurous you are and your tolerance for discomfort, you may want to keep your keys as they are right now rather than continuing with the changes done by Vim. If you feel like you want to disable these remappings for the time being, you can use these two VSCodeVim configurations:

  • vim.useCtrlKeys enables and disables the remapping of CTRL keys. Set it to false and the keys for copy, pasting, find, etc will revert back to VSCode defaults. Set it to true and Vim will take over.
  • vim.handleKeys gives you a more granular control as to which mappings you can enable or disable. It is a dictionary of key/value pairs, where the key is the key combination you want to enable/disable and the value is a boolean flag that represents whether Vim is enabled for that key combination or not. For example, using "<C-d>": true means that <C-d> is handled by Vim, whereas setting it to false reverts back to VSCode native functionality.

The complete lists of the keys that are affected by these remappings can be found in the package.json file of the VSCodeVim extension under the keybindings section.

Summary

When you install VSCodeVim, your VSCode editor will become a slightly stranger place. Vim relies on modes to make you more effective and the default mode in Vim is Normal mode, a mode where you don’t type text on the screen.

Normal mode is optimized for text editing and navigating your codebase. We often spend more time editing and exploring code that we do inserting it from scratch, so that’s an ingenious design decision. Still, it can feel quite daunting at first, so it’s helpful to know some of the keys you can use to get a basic level of autonomy:

  • Use hjkl to move around.
  • Use i to go back to Insert mode where you can act as-if you’re in vanilla VSCode and type away.
  • Use <ESC>, <CTRL-C> or <CTRL-[> to go back to Normal mode.

With a better understanding of Vim’s philosophy and these basic key mappings under your belt, you’re now ready to continue building your Vim skills and nearer to becoming more awesome at programming. Go forth!


  1. In Windows I’ve used KeyTweak in the past. Long before I joined the hordes of Apple fanboys (and fangirls) and other hipster creatures and got myself a Mac.


Jaime González García

Written by Jaime González García , Dad, Husband, Front-end software engineer, UX designer, amateur pixel artist, tinkerer and master of the arcane arts. You should follow him on Twitter where he shares useful stuff! (and is funny too).Jaime González García