Keyboard controlled VSCode with Vim and Tmux
I have recently abandoned Neovim as I missed a lot of things about VSCode and Webstorm. Mainly the Neovim I was using was basically keyboard first VSCode without debugger with around 30 plugins. In my years using Neovim I have learned a lot about how to take more out of it so I don't see it as a waste (there is always more to learn).
When I was using VSCode with VIM plugin a few years back my setup was nowhere near as good as it is now so I am happy to share some ideas from my most recent config if anyone is looking for tips and tricks on how to improve their development workflow.
Tools I am using
- Fish shell: I don't think shell matters much,
zsh
is also great, Fish has better autocomplete but I do miss sometimes the supportzsh
get's with install instructions and setup steps - Tmux: Mainly for the Vi key mode so that I can select and copy text, so in VSCode I just use cmd+j to show terminal q+space to start copy mode and can select text with hjkl.
- VSCodeVim plugin: there are other plugins but this one was relatively easy to configure to emulate the configuration I was using in Neovim
- VSCode keybindings and settings: lot of fine tuning to make everything work, will try to keep that updated in my dotfiles
tmux.conf
set -g status-keys vi
set-window-option -g mode-keys vi
bind-key Space copy-mode
settings.json
"terminal.integrated.profiles.osx": {
"tmux-shell": {
"path": "tmux",
"args": [
"new-session",
"-A",
"-s",
"vscode:${workspaceFolder}"
]
}
}
`keybindings.json`` - hjkl navigation inside VSCode
{
"key": "ctrl+h",
"command": "workbench.action.navigateLeft",
},
{
"key": "ctrl+j",
"command": "workbench.action.navigateDown",
},
{
"key": "ctrl+k",
"command": "workbench.action.navigateUp",
},
{
"key": "ctrl+l",
"command": "workbench.action.navigateRight",
}
VSCodeVim configuration
I use a lot of Vim keybindings that you can find in my configuration files.
settings.json
"vim.replaceWithRegister": true,
"vim.camelCaseMotion.enable": true,
"vim.highlightedyank.enable": true,
"vim.hlsearch": true,
"vim.easymotion": true,
"vim.leader": " ",
"vim.useSystemClipboard": true,
"vim.visualstar": true
Vim: Replace with Register
Allows me to use substitute operation in a very useful way, so that I can just do siw
to overwrite word with the contents of my clipboard. I got used to this behavior from vim-subversive.
Vim: Surround
This plugin is enabled by default and makes it super easy to surround text in any symbol pair. I use this in both normal and visual mode to surround any block of text with brackets, quotes etc.
Vim: Camel Case Motion
Easy navigation by part of words using w, b, e
etc. in camelCase text.
Vim: Easymotion
Similar to many jump plugins, probably not the best but good enough. The plugin allows to jump to any symbol or word on the screen.
I personally map it to s
(forwards) and S
(backwards) in normal mode followed by the start of a letter.
Outside of VSCode
I use keyboard hotkeys to switch between Chrome and VSCode with one shortcut. I find this even better than using multiple monitors and moving my eyes, also less straining on my neck if the monitor distance is suboptimal, more scalable and portable.