Vim Motions in VSCode

Vim, well… is definitely something. But I’m not going to talk too much about Vim here. Today, I want to quickly go through some settings in VSCode to make life smooth like butter for beginners (like me) to start their journeys with Vim Motions. Let’s wait no longer and jump right in!

What is Vim Motions?

Vim is an open-source and cross-platform text editor. If you go to your terminal, Vim is probably there available for you. Just simply type vi <text_file>, and it will take you into the Vim editor space.

Vim Motions is a big part of Vim, specifically dictating the way you navigate around in your document and edit with varied commands and shortcuts right on your keyboard.

Why Vim Motions?

I think this essentially boils down to your own taste when it comes to editing text or code. But here are a few things to consider:

Blazingly fast: If you get used to all the shortcuts and commands, navigating or jumping around in your code is a piece of cake! But do note that it does take quite some time to get used to Vim Motions.
Minimal mouse interaction: With Vim Motions, most of the time, you will use your keyboard and won’t touch your mouse. Unless you switch to the browser or some other apps to debug, Vim Motions will keep your hands busy on the keyboard.
Feel connected with your workflow: Vim Motions allows an extremely high degree of customization. So, after some small configurations below, VSCode will become your ultimate workspace working in your favor.
Have fun: If you get past the hard part of practicing, using Vim Motions will feel like playing a mind game!

It is well-known that Vim Motions is NOT beginner-friendly, but it is user-friendly. Once you can sub-consciously move around your code with Vim Motions, your experience only exponentially improves from there.

What is the setup?

Now comes the core components: VSCode + Vim Motions

Step 1: Install the Vim extension in VSCode

When you type vim in the extension market, the Vim extension should appear as the first item.

Step 2: Follow my repo for details on settings in VSCode

The full link for settings is here: doanhtu07/vscode-vim-settings (github.com)

If there are any problems, let me know. I’ll look into them. But do note that I’m also a beginner in Vim, so there might be problems that are out of my scopes.

Here in Medium, I’ll attach the two most important snippets:

// settings.json

{
  // Most of this config is from https://github.com/VSCodeVim/Vim
  // Some mappings are from https://github.com/VSCodeVim/Vim/#key-remapping
  // Another example full config to look at: https://gist.github.com/safinakib/cc081218b73139ee81e5cb96dbc8e5db

  "vim.easymotion": true, // https://github.com/easymotion/vim-easymotion
  "vim.incsearch": true, // Show the next match while entering a search
  "vim.useSystemClipboard": true, // Use the system clipboard register (*) as the default register
  "vim.useCtrlKeys": true, // Enable Vim ctrl keys overriding common VS Code operations such as copy, paste, find, etc.
  "vim.hlsearch": true, // Highlights all text matching current search
  "vim.leader": "<Space>",
  "vim.visualModeKeyBindingsNonRecursive": [
    {
      // In visual mode, delete WITHOUT putting content into clipboard register
      "before": ["leader", "d"],
      "after": ["\"", "_", "d"]
    },
    {
      // In visual mode, paste over WITHOUT putting content under cursor into clipboard register
      "before": ["leader", "p"],
      "after": ["p", "g", "v", "y"]
    }
  ],
  "vim.normalModeKeyBindingsNonRecursive": [
    {
      // In normal mode, same like in visual mode, but can use with MOTION (w, b, ...)
      "before": ["leader", "d"],
      "after": ["\"", "_", "d"]
    },
    {
      // To scroll down and center the cursor to the middle of screen
      "before": ["<C-d>"],
      "after": ["<C-d>", "z", "z"]
    },
    {
      // To scroll p and center the cursor to the middle of screen
      "before": ["<C-u>"],
      "after": ["<C-u>", "z", "z"]
    },
    {
      // Turn off highlight if necessary after search
      "before": ["<C-n>"],
      "commands": [":nohl"]
    },
    {
      // Add line break shortcut
      "before": ["K"],
      "commands": ["lineBreakInsert"],
      "silent": true
    },

    // https://github.com/Melkeydev/vscode_bindings/blob/main/settings.json
    // Split panes (by vertical and by horizontal)
    { "before": ["leader", "v"], "commands": [":vsplit"] },
    { "before": ["leader", "s"], "commands": [":split"] }
  ],
  "vim.handleKeys": {
    // Avoid Vim overriding VSCode default keybindings like find or select all in Windows
    // These two keybindings below shouldn't matter in Mac
    "<C-a>": false,
    "<C-f>": false
  },
  // To improve performance"
  "extensions.experimental.affinity": {
    "vscodevim.vim": 1
  }
}

// keybindings.json

[
  // For better Vim experience
  // https://hoitz.medium.com/improved-vim-setup-in-visual-studio-code-bc579501b80c
  // Navigate around panes
  {
    "key": "ctrl+h",
    "command": "workbench.action.focusLeftGroup",
    "when": "editorTextFocus && vim.active && vim.mode != 'Insert'"
  },
  {
    "key": "ctrl+l",
    "command": "workbench.action.focusRightGroup",
    "when": "editorTextFocus && vim.active && vim.mode != 'Insert'"
  },
  {
    "key": "ctrl+k",
    "command": "workbench.action.focusAboveGroup",
    "when": "editorTextFocus && vim.active && vim.mode != 'Insert'"
  },
  {
    "key": "ctrl+j",
    "command": "workbench.action.focusBelowGroup",
    "when": "editorTextFocus && vim.active && vim.mode != 'Insert'"
  },

  // https://gist.github.com/safinakib/cc081218b73139ee81e5cb96dbc8e5db
  // Navigate inside suggestions and autocompletion popups
  {
    // "ctrl+j": Selects the next suggestion in the suggestions widget when the widget is visible.
    "key": "ctrl+j",
    "command": "selectNextSuggestion",
    "when": "suggestWidgetVisible"
  },
  {
    // "ctrl+k": Selects the previous suggestion in the suggestions widget when the widget is visible.
    "key": "ctrl+k",
    "command": "selectPrevSuggestion",
    "when": "suggestWidgetVisible"
  },
  {
    // "ctrl+j": Selects the next item in the Quick Open dialog when it is open.
    "key": "ctrl+j",
    "command": "workbench.action.quickOpenSelectNext",
    "when": "inQuickOpen"
  },
  {
    // "ctrl+k": Selects the previous item in the Quick Open dialog when it is open.
    "key": "ctrl+k",
    "command": "workbench.action.quickOpenSelectPrevious",
    "when": "inQuickOpen"
  },

  // https://github.com/Melkeydev/vscode_bindings/blob/main/keybindings.json
  // Some shortcuts for file tree
  {
    "key": "n",
    "command": "explorer.newFile",
    "when": "filesExplorerFocus && !inputFocus"
  },
  {
    "key": "r",
    "command": "renameFile",
    "when": "filesExplorerFocus && !inputFocus"
  },
  {
    "key": "shift+n",
    "command": "explorer.newFolder",
    "when": "explorerViewletFocus"
  },
  {
    "key": "d",
    "command": "deleteFile",
    "when": "filesExplorerFocus && !inputFocus"
  }
]

Copy the content of these files and paste properly into your VSCode settings.json and keybindings.json files.

In my Github repo above, I’ve shown how you can access these files on your VSCode. I also bonus some useful shortcuts I like to use for moving around different panels of VSCode.

Step 3: Take some time to practice and get used to Vim Motions

It is not magical that you can automatically use Vim Motions smoothly right after setting up. It took me around 2–3 days to only get used to basic Vim Motions and could actually use it to edit my code. It could take even longer to become fast and comfortable with all the shortcuts.

Practicing, I have to say, is the hardest part. At first, it will be very slow and discouraging, but it will quickly get easier and easier, I promise. View it as a journey. Have some fun. And the water will eventually push you there!

Here are some resources that helped me along the way:

Use vimtutor on Mac Terminal. I believe this exists on Windows too. It provides lessons and exercises right from your terminal.
I also watch parts of the series Vim as your editor on YouTube by ThePrimeagen, where he suggests some cool tricks for Vim Motions.
A few minutes ago, I found this Vim cheatsheet, so I’ll share it here too: My vi/vim cheatsheet (worldtimzone.com)

BONUS !!!

Besides the code editor, the browser is my second workplace I use for almost all of my tasks including researching, studying, and doing projects. Links are a big part of all these tasks. Being able to navigate and search for links quickly is a must!

My favorite browser extension to use is Yoyo Shortcut. It’s a bookmark manager tool that supports attaching keyword shortcuts to links and organizing your links into neat dashboards.

Check it out if you’re curious. If you have any further questions, let me know in the comments. Happy motioning!