Unlock the power of Vim in Visual Studio Code

René Kulik on 05.08.2024

Introduction

Visual Studio Code is a popular code editor and my go-to tool for daily programming tasks. In addition to the standard keybindings, I am also using the Vim extension to use its commands. In this blog post, I will share my Visual Studio Code settings including Vim specific adjustments. Whether you are a seasoned Vim user or just starting out, this blog post will help you configure your Visual Studio Code setup to leverage the best of both worlds. Note that I will not cover standard Vim commands. Instead, my focus will be on the specific configurations I use to integrate Vim functionalities.

Extension

The Visual Studio Marketplace offers a wide range of extensions to enhance your editor’s functionalities and experience. Vim is one of them and a must-have for integrating Vim keybindings and commands within Visual Studio Code. The extension can be installed from the extensions sidebar in Visual Studio Code or by following the instructions from the marketplace page.

General settings

To get the most out of the Vim extension, I adjusted a few key settings. I set the spacebar as my vim.leader, which acts as a prefix key to trigger custom commands. Another useful setting is vim.useSystemClipboard, which enables clipboard integration between Visual Studio Code and your system. This means you can easily copy and paste text between the editor and other applications. To configure these settings, open the settings.json file and add the following:

{
  "vim.leader": "<space>",
  "vim.useSystemClipboard": true
}

Keybindings

Customized keybindings are essential to tailor Visual Studio Code to your exact needs. By defining your own keybindings, you can enhance productivity and ensure that the most frequently used commands are easily accessible. In this section, I will share the specific keybindings I have introduced for the different Vim modes. The following configurations should be added to the settings.json file.

Normal mode

The following keybindings are configured for the normal mode:

Comment out the current line or a selection of lines

{
  "before": [
    "g",
    "c",
    "c"
  ],
  "commands": [
    "editor.action.addCommentLine"
  ]
}

Uncomment the current line or a selection of lines

{
  "before": [
    "g",
    "c",
    "u"
  ],
  "commands": [
    "editor.action.removeCommentLine"
  ]
}

Focus the group on the right when using multiple groups splitted horizontally

{
  "before": [
    "<C-l>"
  ],
  "commands": [
    "workbench.action.focusRightGroup"
  ]
}

Focus the group on the left when using multiple groups splitted horizontally

{
  "before": [
    "<C-h>"
  ],
  "commands": [
    "workbench.action.focusLeftGroup"
  ]
}

Focus the group below when using multiple groups splitted vertically

{
  "before": [
    "<C-j>"
  ],
  "commands": [
    "workbench.action.focusBelowGroup"
  ]
}

Focus the group above when using multiple groups splitted vertically

 {
  "before": [
    "<C-k>"
  ],
  "commands": [
    "workbench.action.focusAboveGroup"
  ]
}

Split the editor vertically

 {
  "before": [
    "<leader>",
    "-"
  ],
  "commands": [
    "workbench.action.splitEditorDown"
  ]
}

Split the editor horizontally

 {
  "before": [
    "<leader>",
    "|"
  ],
  "commands": [
    "workbench.action.splitEditorRight"
  ]
}

Close the active editor

 {
  "before": [
    "<leader>",
    "b",
    "c"
  ],
  "commands": [
    "workbench.action.closeActiveEditor"
  ]
}

Close all other editors except the active one

 {
  "before": [
    "<leader>",
    "b",
    "C"
  ],
  "commands": [
    "workbench.action.closeOtherEditors"
  ]
}

Jump to the next editor on the right

 {
  "before": [
    "<tab>"
  ],
  "commands": [
    "workbench.action.nextEditor"
  ]
}

Jump to the previous editor on the left

{
  "before": [
    "<S-tab>"
  ],
  "commands": [
    "workbench.action.previousEditor"
  ]
}

Show/hide the sidebar

{
  "before": [
    "<C-n>"
  ],
  "commands": [
    "workbench.action.toggleSidebarVisibility",
  ]
}

Undo the latest change

 {
  "before": [
    "u"
  ],
  "after": [],
  "commands": [
    {
      "command": "undo",
      "args": []
    }
  ]
}

Redo the latest change

 {
  "before": [
    "<C-r>"
  ],
  "after": [],
  "commands": [
    {
      "command": "redo",
      "args": []
    }
  ]
}

Visual mode

The following keybindings are configured for the visual mode:

Comment out the current line or a selection of lines

{
  "before": [
    "g",
    "c",
    "c"
  ],
  "commands": [
    "editor.action.addCommentLine"
  ]
}

Uncomment the current line or a selection of lines

 {
  "before": [
    "g",
    "c",
    "u"
  ],
  "commands": [
    "editor.action.removeCommentLine"
  ]
}

Move the selected text to the next tab stop on the right

{
  "before": [
    ">"
  ],
  "after": [
    ">",
    "g",
    "v"
  ]
}

Move the selected text to the previous tab stop on the left

 {
  "before": [
    "<"
  ],
  "after": [
    "<",
    "g",
    "v"
  ]
}

Other

The following keybindings are part of the general keybindings.json. They were configured with Vim in mind, but are not limited to it:

Move the active editor to the group on the left

{
  "key": "ctrl+shift+h",
  "command": "workbench.action.moveEditorToLeftGroup"
}

Move the active editor to the group below

{
  "key": "ctrl+shift+j",
  "command": "workbench.action.moveEditorToBelowGroup"
}

Move the active editor to the group above

{
  "key": "ctrl+shift+k",
  "command": "workbench.action.moveEditorToAboveGroup"
}

Move the active editor to the group on the right

{
  "key": "ctrl+shift+l",
  "command": "workbench.action.moveEditorToRightGroup"
}

Conclusion

Integrating Vim into Visual Studio Code can significantly enhance your coding workflow. By customizing you settings and keybindings, you can tailor your editor to your specific needs. The adjustments shared in this blog post are designed to help you steamline your workflow and get the most out of Visual Studio Code. Experiment with these settings to find what works best for you.