DEV Community

Cover image for Boost Your Coding Fu With Visual Studio Code and Vim

Boost Your Coding Fu With Visual Studio Code and Vim

Jaime González García 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...
Collapse
 
vip3rousmango profile image
Al Romano

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.
Collapse
 
vintharas profile image
Jaime González García

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 :)

Collapse
 
sduduzog profile image
Sdu

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

Collapse
 
vintharas profile image
Jaime González García

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

Collapse
 
sduduzog profile image
Sdu

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

Thread Thread
 
vintharas profile image
Jaime González García

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

Thread Thread
 
sduduzog profile image
Sdu

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.

Thread Thread
 
vintharas profile image
Jaime González García

Awesome! :D

Collapse
 
mikaoelitiana profile image
Mika Andrianarijaona

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

Collapse
 
vintharas profile image
Jaime González García • Edited

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...

Collapse
 
mikaoelitiana profile image
Mika Andrianarijaona

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

Thread Thread
 
vintharas profile image
Jaime González García

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

Thread Thread
 
mikaoelitiana profile image
Mika Andrianarijaona

Ok thanks ;). Have a nice holiday then 🏖

Thread Thread
 
mikaoelitiana profile image
Mika Andrianarijaona

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

Thread Thread
 
vintharas profile image
Jaime González García

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)

Collapse
 
mccabiles profile image
Miguel

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.

Collapse
 
vintharas profile image
Jaime González García • Edited

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:

Collapse
 
qm3ster profile image
Mihail Malo

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

Collapse
 
vintharas profile image
Jaime González García

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 😁

Collapse
 
qm3ster profile image
Mihail Malo

At work I can't say what I use

That's super creepy, man 😨

Thread Thread
 
vintharas profile image
Jaime González García

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

Thread Thread
 
qm3ster profile image
Mihail Malo

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?

Thread Thread
 
vintharas profile image
Jaime González García

It's just internal stuff I can't talk about :)

Collapse
 
mskog profile image
Magnus Skog

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!

Collapse
 
vintharas profile image
Jaime González García

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

Collapse
 
moopet profile image
Ben Sinclair

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.

Collapse
 
vintharas profile image
Jaime González García

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?

Collapse
 
moopet profile image
Ben Sinclair

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.

Thread Thread
 
vintharas profile image
Jaime González García

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 😀

Collapse
 
jsheridanwells profile image
Jeremy Wells

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

randyrants.com/category/sharpkeys/

Collapse
 
vintharas profile image
Jaime González García

That's awesome! Thanks for sharing it Jeremy! :D

Collapse
 
lepinekong profile image
lepinekong

Vim feels like I'm back 30 years ago with ... Multiplan but thanks I'll try :)

Collapse
 
vintharas profile image
Jaime González García

Go go! :D

Collapse
 
errietta profile image
Erry Kostala

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

Collapse
 
vintharas profile image
Jaime González García

Go Vim! :D Glad that you found it helpful! :)

Collapse
 
aaw5017 profile image
Alex Wardi

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!

Collapse
 
vintharas profile image
Jaime González García • Edited

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

Collapse
 
mjac profile image
Mitch Jackson

Most user friendly intro to vim I've ever seen. Well done!

Collapse
 
vintharas profile image
Jaime González García

Thank you!! :D That means a lot :)

Collapse
 
t0nyandre profile image
Tony André Haugen

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 🤣

Collapse
 
vintharas profile image
Jaime González García

Hehe I feel ya 😁

Collapse
 
vicoerv profile image
Vico

anyone trying at coolwanglu.github.io/vim.js/emterp... ? 😁

Collapse
 
vintharas profile image
Jaime González García

Hand't seen this before. IT IS REALLY COOL :D Thanks for sharing!

Collapse
 
javaguirre profile image
Javier Aguirre

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