VSCode + Vim extension: tweaks and QoL improvements to take your DX to the next level!

Eduardo Hilário — Thu, 27 Jun 2024 17:07:41 +0000

I've been using the Vim extension for VSCode for a couple years now and I've collected dozens of tips that I'd like to share here.

This will be a continuous post that I'll be updating overtime, feel free to comment and leave your own suggestions.

Things to know

Vim extension has its own keyboard keybindings that are used by VSCode to execute all the Vim motions and commands.

Part of customizing your VSCode + Vim DX will be involved in changing the configurations of settings.json (User settings) and keybindings.json (Keyboard shortcuts) files side-by-side. I'll walk you through it.

To access your User settings press Ctrl+Shift+P to access the Command Palette and search for "Preferences: Open User Settings (JSON)".

To access your Keyboard shortcuts use the Command Palette and search for "Preferences: Open Keyboard Shortcuts (JSON)".

Quality-of-life improvements

These are some of the change I've made to the behaviour of Vim that makes it more intuitive to use, by removing some of the overlapping conflicts with VSCode's own behaviours.

Changing the Leader key

Vim's Leader key serves as the initial trigger for a multitude of shortcuts. I went with the community's most used Space for this one.

// settings.json
"vim.leader": "<space>"

Adjust the minimum visible lines surrounding the cursor

By default, your cursor will go all the way up to the top and bottom of the editor's margins, which difficults the vibility of where you can move. Adjust this one based on personal preference, mine is a minimum of 6 lines that are always visible as I go up and down the editor.

// settings.json
"editor.cursorSurroundingLines": 6

Notice how the number 6 (top of the editor) never changes when I go up, the same applies to the bottom.

Prevent exiting Insert mode when closing the suggestions widget

Exiting Insert mode and closing the suggestions widget are both triggered by Escape and when Vim exits Insert mode on an empty line it puts the cursor at column 1, ignoring the current indentation. This shortcuts fix this by only closing the suggestions widget and not exiting Insert mode (preserving current indentation).

// keybindings.json
{
  "key": "escape",
  "command": "extension.vim_escape",
  "when": "editorTextFocus && vim.active && !inDebugRepl && !suggestWidgetVisible"
},
{
  "key": "escape",
  "command": "-extension.vim_escape",
  "when": "editorTextFocus && vim.active && !inDebugRepl"
}

Disabling Vim keybindings that conflict with native VSCode shortcuts

You can disable Vim's Ctrl shortcuts by settings which combinations you'd like with the vim.handleKeys key, instead of deleting it via the "Preferences: Open Keyboard Shortcuts" (Ctrl+K Ctrl+S).

// settings.json
"vim.handleKeys": {
  // Open Sidebar
  "<C-b>": false,
  // Find
  "<C-f>": false,
  // Replace
  "<C-h>": false,
  // View: Toggle Panel Visibility (the terminal panel)
  "<C-j>": false,
  // Ctrl+K is used by dozens of VSCode shortcuts
  "<C-k>": false,
  // Go to file...
  "<C-p>": false,
  // Trigger Suggest
  "<C-space>": false,
  // View: Close Editor (Vim's window manager works in VSCode, so if you'd like it don't use this one)
  "<C-w>": false
}

Conclusion

Well, I hope you find these tips useful for moving and editing your code faster, godspeed.

On VSCode, how to open the selected folder from Explorer view into the current open terminal (without opening a new one)?

Eduardo Hilário — Fri, 31 May 2024 22:49:51 +0000

1. Install the multi-command extension

This allows us to create a sequence of commands that can be used by a keybinding.

2. Add this snippet to your `settings.json`

"multiCommand.commands": {
  "multiCommand.openFolderInTerminal": {
    "interval": 10,
    "label": "Open Explorer view folder in active terminal",
    "sequence": [
      "copyFilePath",
      "terminal.focus",
      {
        "command": "workbench.action.terminal.sendSequence",
        "args": { "text": "cd \"" }
      },
      "workbench.action.terminal.paste",
      {
        "command": "workbench.action.terminal.sendSequence",
        "args": { "text": "\"" }
      },
      {
        "command": "workbench.action.terminal.sendSequence",
        "args": {
          "text": "\u000D"
        }
      }
    ]
  }
}

What this effectively does is to copy the path of the selected folder and send sequences of text to the terminal, as stated here. The quotes are escaped by \ and Enter is sent by the newline unicode character \u000D.

3. Add a keybinding to your `keybindings.json`

{
  "command": "multiCommand.openFolderInTerminal",
  "key": "ctrl+enter",
  "when": "filesExplorerFocus && !inputFocus"
}

The value of the "command" key has the same text as the one defined on the "multiCommand.commands" object.

DEV Community: Eduardo Hilário