Vim Motions in Visual Studio Code

Translated from German using DeepL.

Date: April 2025
Reading time: 7 minutes

Vim

Vim is a configurable text editor. Instead of relying on a mouse and menus, it works with keyboard shortcuts and commands. If you master it, you can move through the code with impressive efficiency.

Vim Motions

Motions are a key reason for the efficiency that characterizes Vim. They enable fast, precise actions - and therefore not only contribute to speed, but also to a noticeably better flow when working. The latter is even more important to many developers than pure speed.

No reaching for the mouse, no searching for menus - you stay focused on the task at hand. The fingers hardly leave the home position on the keyboard. This minimizes context changes, reduces unnecessary movements, is easy on the wrists and promotes a consistent working rhythm.

However, this efficiency gain comes at a price: the learning curve is steep. If you are serious about getting started, you must be prepared to invest time in learning the concepts and configuring the environment. Once you have mastered the Motions, however, navigation merges with thinking - and editing becomes an almost seamless, intuitive activity.

VS Code Integration

Vim and Neovim may seem like niche solutions at first glance, but they are highly regarded among developers. In the Stack Overflow Developer Survey 2024 (opens in a new tab), Vim is ranked 4th and Neovim 6th among the most used development environments. With 83% admiration, Neovim is the highest rated editor.
At the same time, around 59% of developers use Visual Studio Code as one of their main IDEs - well ahead of IntelliJ IDEA in second place.

To benefit from the Vim concept, you don't have to switch completely to Vim, Neovim or Emacs. With the extension VSCodeVim, the Vim motions can be integrated directly into Visual Studio Code. This retains the convenience of a modern IDE - while at the same time utilizing the efficient, keyboard-based operation of Vim.

Basics

Vim works in a fundamentally different way to classic editors. Instead of working in one text editing mode throughout, Vim uses different modes, each of which is designed for specific tasks:

Most actions in Vim follow a simple pattern:
[Operator][Count][Motion]

Examples:

• d2w - deletes two words (delete + count + motion)
• y$ - copies to the end of the line (yank + motion)
• c3j - replaces the content of the next three lines (change + motion)

In addition, Vim allows commands that refer to certain structures in the text - such as quotation marks, brackets or HTML tags:

• da" - deletes quotation marks including content (delete around quotes)
• yy - copies the current line (yank line)
• cit - replaces the content within an HTML tag (change inside tag)

For navigation, Vim uses the keys h, j, k, l, instead of the arrow keys:

• j - down
• k - up
• h - to the left
• l - to the right

Powerful, combinable operations can be carried out with just a few commands - without ever taking your hands off the keyboard.

CheatSheet

The following overview shows many of the possibilities:

Source: https://thingsfittogether.com (opens in a new tab)

EasyMotion

Despite all the efficiency, navigating in longer files with Vim can sometimes be tedious. You can jump to certain characters, but only within the current line. If the character occurs several times, the hit is not always directly accessible.
The EasyMotion plugin solves this problem: it marks all possible jump targets visually in the editor. With just a few keys, you can jump directly to the desired position.

Configuration

The following excerpts show my personal preferences.
They reflect my individual preferences and are not to be understood as a generally valid recommendation, but as inspiration.

Settings

The key bindings are defined in the main settings - which key combinations trigger which actions. This can be done separately for each mode.
Non-recursive assignments prevent the creation of endless loops.

{
    // insert mode
    "vim.insertModeKeyBindingsNonRecursive": [
        // additional way to exit
        {
            "before": ["j", "j"],
            "after": ["<esc>"],
            "commands": ["workbench.action.files.save"]
        },
        // save on exit
        {
            "before": ["<esc>"],
            "after": ["<esc>"],
            "commands": ["workbench.action.files.save"]
        }
    ],
 
    // normal mode
    "vim.normalModeKeyBindings": [
        // vertical block jumping
        {
            "before": ["shift+j"],
            "after": ["}"]
        },
        {
            "before": ["shift+k"],
            "after": ["{"]
        },
        // easymotion end of word down and up
        {
            "before": ["space", "j"],
            "after": ["leader", "leader", "e"]
        },
        {
            "before": ["space", "k"],
            "after": ["leader", "leader", "g", "e"]
        }
    ]
}

The leader is a user-defined key that serves as a prefix for key combinations.

Profile

Both the behavior and the appearance can be adjusted in the profile settings.
Particularly recommended are the relative line numbers activated with "editor.lineNumbers": "relative", which enable quick jumps in the code.

{
    // visual
    "editor.lineNumbers": "relative",
    "vim.statusBarColorControl": true,
    "vim.statusBarColors.normal": ["#181818", "#fff"], // bg, text
    "vim.statusBarColors.insert": ["#000", "#808080"],
    "vim.statusBarColors.visual": ["#bbb2a2", "#282624"],
    "vim.statusBarColors.visualline": ["#ede2cf", "#282624"],
    "vim.statusBarColors.visualblock": ["#ede2cf", "#282624"],
    "vim.hlsearch": true, // highlight all text matching current search
    "vim.highlightedyank.enable": true,
    "vim.highlightedyank.color": "rgba(0, 0, 0, 0.5)",
 
    // copying/yanking
    "vim.useSystemClipboard": true, // system clipboard register (*) as default
    "vim.overrideCopy": false, // stays in current mode after copying
 
    // usabilty
    "vim.mouseSelectionGoesIntoVisualMode": false, // enables use of mouse in insert mode
 
    // easymotion
    "vim.easymotion": true,
    "vim.easymotionMarkerForegroundColorOneChar": "#eeff00",
    "vim.easymotionMarkerForegroundColorTwoCharFirst": "#eeff00",
    "vim.easymotionMarkerForegroundColorTwoCharSecond": "#eeff00",
 
    // performance
    "extensions.experimental.affinity": { "vscodevim.vim": 1 }
}

Keybindings

I can only recommend that you familiarize yourself with the available shortcuts and adapt them as required. There are already predefined shortcuts for many functions, but these sometimes require more movement and make it necessary to reach for the mouse. By making your own adjustments, you can further reduce this dependency and stay closer to the home screen.
To make the controls consistent, I often use the same keys as for the Motions - e.g. h and l for left and right.

[
    // tab navigation
    {
        "key": "cmd+h",
        "command": "workbench.action.previousEditor"
    },
    {
        "key": "cmd+l",
        "command": "workbench.action.nextEditor"
    },
 
    // split editor
    {
        "key": "cmd+7",
        "command": "workbench.action.splitEditor"
    },
 
    // toggle between editor and explorer
    {
        "key": "cmd+m",
        "command": "workbench.action.focusFirstEditorGroup"
    },
    {
        "key": "cmd+m",
        "when": "editorFocus",
        "command": "workbench.explorer.fileView.focus"
    },
 
    // filesystem
    {
        "key": "n",
        "command": "explorer.newFile",
        "when": "filesExplorerFocus && !inputFocus"
    },
    {
        "key": "r",
        "command": "renameFile",
        "when": "filesExplorerFocus && !inputFocus"
    },
    {
        "key": "shift+n",
        "when": "explorerViewletFocus",
        "command": "explorer.newFolder"
    },
    {
        "key": "d",
        "when": "filesExplorerFocus && !inputFocus",
        "command": "deleteFile"
    },
 
    // VS Code/Vim multiline fix
    {
        "key": "cmd+alt+up",
        "command": "-extension.vim_cmd+alt+up",
        "when": "editorTextFocus && vim.active && !inDebugRepl"
    },
    {
        "key": "cmd+alt+down",
        "command": "-extension.vim_cmd+alt+down",
        "when": "editorTextFocus && vim.active && !inDebugRepl"
    }
]

For smooth operation, I recommend consciously deciding which functions of Vim and which of VS Code you want to use so as not to mix the two unnecessarily.

I appreciate certain features of VS Code, such as the advanced search function and multiline editing (e.g. ⌘ ⇧ L), which provide me with a faster and more pleasant user experience than would be possible in Vim. I also prefer to open, save and close files using the built-in VS code shortcuts, as I am already familiar with them. I therefore rarely use Vim's command mode. For this reason, I have also made a setting to preserve multiline editing.

System

I have mapped the Caps Lock button to Escape so that I can switch from all modes to Normal Mode more quickly and conveniently.

More

Further setting options for the VSCodeVim extension are listed in the corresponding readme:
https://github.com/VSCodeVim/Vim (opens in a new tab)

Learning Resources

Learning the motions requires patience. You have to read, practise and apply the motions yourself. Two resources have helped me in particular:

Personal experience

After about a month with VSCodeVim, I can look back on various phases.

1 - Aha moment

The first few hours were impressive - control over the cursor, without a mouse. I realized the potential of the Motions. There was a lot to learn.

2 - settings.json

VSCodeVim works immediately after installation. However, the experience only becomes complete with specific settings. After the first basics, I invested a lot of time in the configuration to adapt the environment to my way of working.

3 - Frontend?

As a frontend developer, I had doubts in the meantime as to whether Vim was really the right tool. Frequently switching to the browser, examining elements and scrolling often led me back to the trackpad.

4 - Keyboard

I now use the trackpad much less frequently. With AeroSpace (opens in a new tab) as a window manager and consistent shortcuts, I navigate efficiently through my environments.
However, I still don't want to do without the trackpad completely. It remains more practical when scrolling or navigating quickly in insert mode. Especially as a front-end developer who frequently switches between editor and browser, this mix is currently the best for me.
Not everything is running smoothly yet, but I work more efficiently because I have familiarized myself with my setup and use it in a targeted manner.

Conclusion

I will definitely continue to use the Motions. They not only make editing more efficient, but also more pleasant. Whether they will remain my primary interface in the long term remains to be seen. But the journey there is exciting and the progress is motivating.