Boost Your Coding Fu With Visual Studio Code and Vim

🔥 Jaime González 🔥 on February 10, 2019

This article was originally posted in barbarianmeetscoding.com. Visual Studio Code is superb. It offers an unparalleled user experience with great... [Read Full]
markdown guide
 

Fantastic write up!

So many developers avoid Vim because they don't see how it can help with tools like VS Code. This takes it to a whole new level!

This is an awesome way to bring it into more modern context and feel terminal-y without having to use Vim in terminal.

  • tip of the hat to you. good sir.
 

Thank you!! :D

So many developers avoid Vim because they don't see how it can help with tools like VS Code. This takes it to a whole new level!
This is an awesome way to bring it into more modern context and feel terminal-y without having to use Vim in terminal.

That is my hope :)

 

Thanks for the great post!! DO you have some insight about using multiple cursor in VIm/VSCode? I could use some help there!

 

Thank you!! 😀

If you are in insert mode it works as usual. In normal mode there's this experimental feature which TBH I haven't tested yet 😁:

github.com/VSCodeVim/Vim/blob/mast...

 

Unfortunately, in insert mode, it seems no to work. I used to type ⌥ + cmd + ↓ to add multiple cursors in column down but it doesn't work with Vim enable

Hmm I'd swear this used to work. 😅 I'm going vacation but I'll take a look when I'm back 😊

In fact, it works on normal mode and entering in insert mode would keep the multiple cursors.

Thank you! And you're right, I found this issue on their github repo:

github.com/VSCodeVim/Vim/issues/2439

which describes your problem. I'm pretty sure this used to work but they must've had a regression (but perhaps I'm wrong XD)

It looks like the current implementation is somewhat experimental. The flow you describe seems to work pretty well from normal mode. And if you want to add multiple cursors based on keyword search you need to:

  1. cursor on top of something
  2. cmd-d or gb to add another cursor
  3. This seems to put Vim into visual mode (ready to operate on the selection which makes sense)
  4. cmd-d or gb to continue adding cursors until you're done
  5. Now you can perform an action in visual mode (delete, change, etc) or,
  6. go back to normal mode with ESC and do any normal mode command keeping the multiple cursors

There's a feature in Vim that may solve your use case slightly faster than multiple cursors called Visual Block:

  1. CTRL-V to change to visual block mode
  2. j to select a rectangle of text downwards
  3. I to insert or A to append, insert text and ESC

(The VSCode implementation seems to use multiple cursors under the hood anyway :D)

 

Vim thins the interface between your brain and the computer

I'm sold!

I'm learning vim this year, after 4 years of avoiding it. Sir you are a salesman. A great one at that

 

haha :D Good luck! Let me know if you get stuck somewhere and I'll be happy to help. In the end it requires some practice since you reap most of the rewards when you get accustomed to the commands and your muscle memory kicks in :D

 

In fact, that was what was scaring me off, having to memorize commands. Nevertheless, I've seen enough vim praise to keep me going.

hehe the best advice there is to learn a little bit at a time and practice 😁 you got this 😀👍

I've started already! I still reference a cheat sheet but I can already see what benefits this will have when some commands come from muscle memory.

 

Thank you for the brilliant write up! It really made vim an approachable tool that anyone can use as opposed to some arcane artifact that only hipsters can use.

Its been a week since I started using the vim extension on VS code, and I have to say, its been a delightful experience. While it has been awkward trying to navigate the controls, I keep coming back to your post to learn new things
to learn for the day until it becomes second nature.

Some caveats which I think are worth mentioning: You can't use Ctrl+C to copy text, and you can only use Ctrl+V/Z in INSERT mode to paste/undo.

 

Thank you!!! :D

Its been a week since I started using the vim extension on VS code, and I have to say, its been a delightful experience. While it has been awkward trying to navigate the controls, I keep coming back to your post to learn new things to learn for the day until it becomes second nature.

Awesome! I'm super glad to hear that! Go go! 🙌🙌🙌

Some caveats which I think are worth mentioning: You can't use Ctrl+C to copy text, and you can only use Ctrl+V/Z in INSERT mode to paste/undo.

Thank you for mentioning this! I'll add a note to the article. There's a lot more info about about this in my book:

 

I've been trying vim once or twice in the past but this article got me to try it in VSCode. I'm happy to say that I've been using it for about three weeks now and I at least think that I have become more productive already!

Thank you for a great article!

 

Wow! That is really awesome!! Thank you for letting me know! That made my day ☺️❤️

 

Is this what you use most of the time yourself?
What else do you use? Some kind of bare neovim?

 

For the longest time I used Visual Studio and VSVim, later I used a combination of VSCode(with VSCodeVim) and bare Vim. A couple of months ago I moved to Neovim.

At work I can't say what I use 😁

 

At work I can't say what I use

That's super creepy, man 😨

Hehe sorry, didn't mean to sound creepy 😅, it's just the default answer with big tech companies.

I wouldn't know 🤷.
I've never heard anything like that, let alone about editors.

If you can, answer the following: Is it because it's internal tooling, or because that could be construed as company endorsement?

 

I've been enjoying VSCode (or VSCodium as some other recent post showed me) for a week or two. The vim-ness is pretty good. I like it because it lets me use xdebug better than vdebug.

 

The vim-ness is pretty good

Yeah! Definitely! The VSCodeVim plugin has come a long way and it works really well today. Super kudos to the core team and contributors :D

I'm not familiar with either of those tools, are they debugging tools for php? And xdebug works in VSCode but doesn't in Vim?

 

xdebug is PHP-side, and it just provides a debugging interface any client can use. Vdebug is a vim client for xdebug, and there's one built-in to VSCode (I think, it may have been an extension).
Vdebug is trickier to navigate though because I think for using a debugger with lots of watch windows and so on it's easier (gasp) to use a mouse.

Awesome! Thank you for the detailed response!

Hmm good thought, I haven't vimmified my debugging experience either. 😁 TBH I try to spend as much time on automated testing as I can in order to minimize the need for debugging (which I see as a last resort tool). But when I do, there's lots of mouse involved 😀

 

I've been using VIM for a few years but this actually sold me to get into VSCODE with VIM keybindings! 🙌 Out of the box VSCODE has everything I've used weeks to configure in my plain VIM config 🤣

 
 

EasyMotion looks very interesting! I definitely going to give it a try, thanks!

 

Excellent article and summary explaining the power of Vim! I've been using it for years, and feel naked in any editor without it. Kudos to you!

 

Me too :D Crom bless vim plugins and the people building them. Thank you!! :)

 

I use both vim and vscode so of course I use vim mode inside vscode ;)
Thanks for the tips!

 
 
 

For anyone looking for easy key re-mapping on Windows 10, SharpKeys is a really easy utility to work with:

randyrants.com/category/sharpkeys/

 
 
 
code of conduct - report abuse