DEV Community

loading...

Vim-like Navigation in VSCode

serhatteker profile image Serhat Teker Originally published at tech.serhatteker.com on ・1 min read

My default text editor is Vim. However sometimes I use Visual Studio Code for frond-end stuff. I'm already using VSCodeVim extension —it is a Vim emulator for Visual Studio Code.

Hovewer navigation between buffers and splits in Visual Studio Code feels counter-intuitive and windows os-like. So I want to implement Vim-like navigation: <Ctrl-h> to go left split, <Ctrl-l> to right split etc.

In order to do this add below key mappings in your keybindings.json:

[
    // Navigate Splits
    {
        "key": "ctrl+h",
        "command": "workbench.action.navigateLeft"
    },
    {
        "key": "ctrl+l",
        "command": "workbench.action.navigateRight"
    },
    {
        "key": "ctrl+k",
        "command": "workbench.action.navigateUp"
    },
    {
        "key": "ctrl+j",
        "command": "workbench.action.navigateDown"
    }
]

Also I want to navigate through buffers Vim-like:

To achieve this add below settings in your keybindings.json:

[
    // Navigate buffers
    {
        "key": "ctrl+m",
        "command": "workbench.action.previousEditor"
    },
    {
        "key": "ctrl+n",
        "command": "workbench.action.nextEditor"
    }
]

All done!

Discussion (0)

pic
Editor guide