VSCode Vim-centric configuration and usage

Sun, 27 Mar 2022 00:00:00 +0000

Configuring VSCode to be Vim-centric</h1>
I primarily write code in Python</a>, Javascript</a>, and C#</a> using Vim</a> with a billion plugins and configuration files inherited from past coworkers. Ever since I learned Vim I really enjoyed using it, but over time the plugins used have become unsupported and began breaking the complex plugin setup.
The more I use VSCode I realize I've been missing out on modern editor features. The obvious answer is to do some spring cleaning on the Vim setup, move everything to Neovim</a>, find new supported plugins, and re-write any broken configurations. There are even ways to get VSCode language features into Neovim with Coc.nvim</a> for example. Alas, that is quite a lot of work when I can just install VSCode with the VSCodeVim</a> extension and be almost all of the way to a great development experience.
Keep in mind that you can and probably should use multiple editors. I doubt I will stop using Vim entirely. Visual Studio</a> or Jetbrains Rider</a> for example are amazing tools for working with C#. Tmux</a> makes it really easy to work across multiple codebases with Vim.

Initial VSCode setup</h2>

Install VSCode</a> if you haven't already.</li>
Go to Extensions and install the VSCodeVim</a> extension.</li>
After a editor restart you can now use vim keybindings.</li> </ol>
My general settings file</h2>
To open your settings file open the command palette and type open settings</code>. You should see an option like `Preferences: Open Settings (JSON). This is where your global user configuration lives. You can also have a per-project settings file too.
{ // VSCodeVim extension settings, see https://github.com/VSCodeVim/Vim "vim.leader": "<space>", "vim.sneak": true, "vim.useSystemClipboard": true, "vim.surround": true, "vim.insertModeKeyBindings": [ { "before": ["j", "j"], "after": ["<Esc>"] } ], "vim.normalModeKeyBindings": [ { "before": ["<leader>", "g", "t"], "commands": ["editor.action.revealDefinition"] }, { // cmd B to close it "before": ["<leader>", "t", "r"], "commands": ["workbench.view.explorer"] }, { // cmd B to close it "before": ["<leader>", "g", "r"], "commands": ["workbench.view.explorer"] } ], } </code></pre> Keybinding settings: You can open this in the command pallete under Preferences: Open Keyboard Shortcuts (JSON)</code>. Note: some of these are just disabling ctrl behavior in Vim, it may be easier/better to just disabled all of those in the vim extension.
// Place your key bindings in this file to override the defaultsauto[] [ { // Removes the ctrl+j behavior so ctrl+j works to open the terminal pane in Windows "key": "ctrl+j", "command": "-extension.vim_ctrl+j", "when": "editorTextFocus && vim.active && vim.use<C-j> && !inDebugRepl" }, { // Removes the ctrl+b behavior so ctrl+b works to open the side bar in Windows "key": "ctrl+b", "command": "-extension.vim_ctrl+j", "when": "editorTextFocus && vim.active && vim.use<C-j> && !inDebugRepl" }, { // Removes the ctrl+b behavior so ctrl+b works to open the side bar in Windows "key": "ctrl+b", "command": "-extension.vim_ctrl+b", "when": "editorTextFocus && vim.active && vim.use<C-b> && !inDebugRepl && vim.mode != 'Insert'" } ] </code></pre>
Must know keybindings/vim shortcuts</h2>
Note that some/most of these are different with my configuration, but this is the link to official documentation</a>.
For Vim, the Leader key is space in my configuration. All bindings are for normal mode unless specified. Ideally all frequent bindings require minimal movement to reduce strain.
Action</th> Windows</th> Macos</th> Vim or VSCode</th></tr></thead>

Command Palette</td> SHIFT+CTRL+P</td> SHIFT+CMD+P</td> </td></tr>
Select file Explorer (toggle)</td> SHIFT+CTRL+E</td> SHIFT+CMD+E</td> </td></tr>
Open/Close Side Bar</td> CTRL+B</td> CMD+B</td> </td></tr>
Open/Close Panel (commonly the terminal)</td> CTRL+J</td> CMD+J</td> </td></tr>
Find</td> CTRL+F</td> CMD+F</td> </td></tr>
Find and replace</td> CTRL+H</td> OPT+CMD+F</td> </td></tr>
Save</td> CTRL+S</td> CMD+S</td> :w</td></tr>
Go to definition</td> </td> </td> gd</td></tr>
Toggle line comment</td> </td> </td> gc</td></tr>
Toggle block comment</td> </td> </td> gC</td></tr>
Show hover tips</td> </td> </td> gh</td></tr> </tbody></table>
Other tips</h2>
When in a python file you probably need to configure the python path

Open command pallet and look for Python: Select Interpreter</code> This is buggy... You should be able to also set this in environment settings like so:</li> </ul> "terminal.integrated.env.osx": { "PYTHONPATH": "~/.pyenv/versions/3.6.13/env/apps-authentication/bin/python", "DJANGO_SETTINGS_MODULE": "folder.settings.test" }, </code></pre> But I haven't seen that work yet</li> </ul> </li> You can use zen mode for presentations (command) View: Toggle Zen Mode</code> - you should see the keybinding for it in the command palette too</li> Bonus tip: enable View: Toggle Centered Layout</code></li> </ul> </li> </ul> Official keybindings cheatsheet (no ctrl keys work with the Vim extension installed, but can be configured to): Windows</a></li> macOS</a></li> </ul> Downsides compared to my old setup</h2> One of the biggest benefits of the old setup vs the new one is how easy it was to multiplex terminals. I could split my view with 4 terminals or more, maybe all of them running vim, maybe not. I could switch between those with ctrl+<h,j,k,l> seamlessly (also works with vim splits). With VSCode... Django tests don't integrate with VSCode at all, you will need an extension or just run them in the terminal. You have to pay attention to what python interpreter you are using, I have the auto activation of python environments disabled because it is buggy when switching projects. My Favorite Programming Tool Mon, 10 Jan 2022 00:00:00 +0000 It's a small notebook.</h2> Because the more I learn it seems even more I forget. Also, when first starting my job there was a real information overload. So much you are expected to remember yet it's not humanly possible. A big benefit of writing stuff down is you can help others much better. For example, if you encounter an annoying bug and someone else inevitably encounters the same thing now you can recall the solution perfectly. Or maybe you just want to avoid asking the same thing twice. If you want a digital tool I've used Obsidian</a> with the obsidian-git plugin</a> with success. I've heard other people run their own wiki pages, but I have yet to try that yet. Really though, just use whatever suits you! My Top Movies Wed, 22 Jan 2020 00:00:00 +0000 Because someone told me to never trust anyone who doesn't know what their favorite movies are. Or their favorite tv shows. I'll cover those in another post. In no particular order: The Matrix</a></h2> It's a cyberpunk SciFi about a person choosing which color pill to take. This movie and the series as a whole inspired many cultural phenomena.</li> </ul> Star Wars</a></h2> Nostalgia influences this greatly for me. My brother and I would fight with lightsabers until one of us got hit a little too hard and lightsabers became throwing sabers.</li> The graphics hold up pretty great and the soundtrack is amazing, but the newer movies in the trilogy are all bad. For a good modern continuation of the Star Wars Universe check out The Mandalorian</a>.</li> </ul> Parasite</a></h2> About the disparity of the ultra-rich and those struggling to survive. It's also unironically praised by the ultra-rich.</li> </ul> About Me Sun, 19 Jan 2020 00:00:00 +0000 What do people even put here? Debugging Principles Sun, 19 Jan 2020 00:00:00 +0000 The gist</h2> Reproduce the problem in a non-production environment (locally is best). If not possible, add as much logging as possible and then some.</li> </ul> </li> Eliminate as many variables as possible. Example: comment out code until it works.</li> If you have a stack trace then understand it completely.</li> Don't beat yourself up for not finding it right away.</li> </ul> Why this blog? Thu, 16 Jan 2020 00:00:00 +0000 Originally I started putting things I learned into a Github wiki. The problem with that is I thought it would be better to have it as a blog format instead so I can justify having my own website. To start, this blog is statically generated by Zola</a>, hosted on Github pages</a>, and will contain some stuff. Probably snippets from my experiences running a little home server. Maybe some best practices I've learned at my job as a developer.

A Programmers blog

VSCode Vim-centric configuration and usage

My general settings file</h2> To open your settings file open the command palette and type open settings</code>. You should see an option like `Preferences: Open Settings (JSON). This is where your global user configuration lives. You can also have a per-project settings file too.</p>

My Favorite Programming Tool

My Top Movies

Star Wars</a></h2> Nostalgia influences this greatly for me. My brother and I would fight with lightsabers until one of us got hit a little too hard and lightsabers became throwing sabers.</li>

Parasite</a></h2> About the disparity of the ultra-rich and those struggling to survive. It's also unironically praised by the ultra-rich.</li> </ul>

About Me

Debugging Principles

Why this blog?

Parasite</a></h2>

About the disparity of the ultra-rich and those struggling to survive. It's also unironically praised by the ultra-rich.</li> </ul>