Around early 2021, I started using Vim for VSCode.

The reason is simple. After switching to the HHKB keyboard, I no longer have arrow keys (I have to use the fn key with my pinky), so naturally, I wanted to minimize the use of arrow keys when editing text. Additionally, the control key on the HHKB is located on the Caplock key, making it more convenient to press. Under these external influences, I started learning Vim and found it to be really useful when paired with VSCode. Here, I'll share some experiences and tips for those who are interested. If you're interested in the HHKB keyboard, you can refer to my previous article - Review of the HHKB HYBRID Type-S Keyboard.

VSCodeVim

VSCodeVim is an extension for VSCode that allows developers to use Vim keybindings and commands within VSCode. Using Vim alone requires a lot of time to configure settings, and I also didn't want to break away from the VSCode ecosystem, so using it in combination with VSCode felt more seamless. That's why I don't recommend using Vim alone. Although tools are just aids, the navigation, terminal integration, extensions, and autocompletion provided by VSCode can effectively improve development efficiency.

This extension integrates well with VSCode and allows you to customize keybindings to bind to various functionalities within VSCode. Here are a few settings that I frequently use. Rather than being a Vim tutorial, it's more like sharing how I use this extension and integrate it with other functionalities.

Also, this article is only a recommendation for using Vim with VSCodeVim. I'm not forcing or insisting that every developer must use Vim for development.

(This article contains a large number of GIF files. Currently, there is no zoom-in feature for images. If the images are too small, please open them in a separate tab to view.)

Go to definition

When tracing source code, I often need to look at functions and their implementations. By using the gd and gf keybindings, I can navigate to the implementation or preview the type without having to move the mouse separately while in normal mode. It's very convenient.

Merge Conflict

When merging pull requests and conflicts occur, there are several options available in the top right corner to help resolve the conflict. You can choose between incoming, current, or both. Similarly, to keep the entire operation on the keyboard, I set up additional keybindings.

Copy URL of a file on GitHub

Suppose I find an implementation of a certain file in VSCode and want to share it with other team members. It would be cumbersome to go to GitHub and navigate manually. However, the gitlens extension already has integrated functionality for this (gitlens.copyRemoteFileUrlFrom). Therefore, I can bind a key combination to quickly copy the URL or directly open the browser to jump to the GitHub page.

Quickly prettify code

I have bound the "format document" action to the ff key combination in normal mode. This allows me to quickly prettify the file by simply pressing f twice, which is very convenient. Of course, you can also enable the "format on save" option directly.

Git Blame

Although GitHub has a convenient Blame feature, it's best to have it within VSCode. This functionality is already available in gitlens, so we just need to bind the key combination. Like this, I can use the keyboard to trace specific lines of code and blame until I find the culprit. (I'm using my own project as an example, but it should be even more convenient for collaborative projects.)

Open file in Finder (revealFileInOS)

Sometimes it's convenient to directly jump to the path of a file for adjustments. I have also bound this functionality to a key combination in Vim.

Splitting two tabs vertically or horizontally

If you have a 27-inch external monitor, it's sometimes convenient to have tabs split vertically or horizontally when working on HTML and CSS together. This makes it easier to view and switch between them. In VSCodeVim, you can achieve this using :vs or :sp. You can also use <C-w>+arrow key to switch between left and right panes.

If you're interested, you can refer to the following JSON file. Everyone has their own preferred keybindings, so you can modify them according to your needs.

"vim.normalModeKeyBindings": [
    {
      "before": [
        "g", "l"
      ],
      "commands": [
        "cmake.build"
      ]
    },
    {
      "before": [
        "<leader>",
        "q"
      ],
      "commands": [
        "workbench.action.openRecent"
      ]
    },
    {
      "before": [
        "g",
        "f"
      ],
      "commands": [
        "editor.action.peekDefinition"
      ]
    },
    {
      "before": [
        "g",
        "n"
      ],
      "commands": [
        "cmake.build"
      ]
    },
    {
      "before": [
        "<leader>",
        "<leader>",
        "c"
      ],
      "commands": [
        "merge-conflict.accept.current"
      ]
    },
    {
      "before": [
        "<leader>",
        "o"
      ],
      "commands": [
        "gitlens.openFileOnRemoteFrom"
      ]
    },
    {
      "before": [
        "<leader>",
        "<leader>",
        "i"
      ],
      "commands": [
        "merge-conflict.accept.incoming"
      ]
    },
    {
      "before": [
        "<leader>",
        "<leader>",
        "b"
      ],
      "commands": [
        "merge-conflict.accept.both"
      ]
    },
    {
      "before": [
        "<leader>",
        "s"
      ],
      "commands": [
        "workbench.action.quickOpenTerm"
      ]
    },
    {
      "before": [
        "<leader>",
        "c"
      ],
      "commands": [
        "gitlens.copyRemoteFileUrlFrom"
      ]
    },
    {
      "before": [
        "<leader>",
        "b"
      ],
      "commands": [
        "gitlens.toggleFileBlame"
      ]
    },
    {
      "before": [
        "<leader>",
        "p"
      ],
      "commands": [
        "gitlens.openBlamePriorToChange"
      ]
    },
    {
      "before": [
        "<leader>",
        "a"
      ],
      "commands": [
        "workbench.view.explorer"
      ]
    },
    {
      "before": [
        "<leader>",
        "<leader>",
        "r"
      ],
      "commands": [
        "revealFileInOS"
      ]
    },
    {
      "before": [
        "f",
        "f"
      ],
      "commands": [
        "editor.action.formatDocument"
      ]
    },
    {
      "before": [
        "+",
        "+"
      ],
      "commands": [
        "workbench.action.increaseViewSize"
      ]
    },
    {
      "before": [
        "-",
        "-"
      ],
      "commands": [
        "workbench.action.decreaseViewSize"
      ]
    }
 ]

Other useful tips

• vit vat to select tag blocks: You can directly select the block wrapped in tags, such as a block wrapped in <div>.
  • Similarly, cit dit, etc., can be used to modify or delete content, respectively.
• dst to remove the outer tag: In frontend development, there are often cases where an extra div is used as a wrapper, but suddenly you don't need it anymore. You can use this operation to remove it.
• cstt to change tags, for example, from <p> to <div>: This is my favorite operation because it's very fast to modify.
• . to repeat the last action.
• yssb to surround the text block with ().
• yiw ciw to delete a word.
• cs"' to replace " with '.
• dgn to delete until the searched character.

I won't go into detail about other Vim tricks. Additionally, VSCodeVim also supports recording, which allows you to record complex operations and execute them later, reducing keystrokes.