DEV Community

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

Boost Your Coding Fu With Visual Studio Code and Vim

Jaime πŸ”₯πŸ§™β€β™‚οΈπŸ”₯ 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...
pic
Editor guide
Collapse
sduduzog profile image
Beautus S Gumede

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 πŸ”₯πŸ§™β€β™‚οΈπŸ”₯ Author

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
Beautus S Gumede

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 πŸ”₯πŸ§™β€β™‚οΈπŸ”₯ Author

hehe the best advice there is to learn a little bit at a time and practice 😁 you got this πŸ˜€πŸ‘

Thread Thread
sduduzog profile image
Beautus S Gumede

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
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 πŸ”₯πŸ§™β€β™‚οΈπŸ”₯ Author • 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 πŸ”₯πŸ§™β€β™‚οΈπŸ”₯ Author

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 πŸ”₯πŸ§™β€β™‚οΈπŸ”₯ Author

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
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 πŸ”₯πŸ§™β€β™‚οΈπŸ”₯ Author

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
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 πŸ”₯πŸ§™β€β™‚οΈπŸ”₯ Author • 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
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 πŸ”₯πŸ§™β€β™‚οΈπŸ”₯ Author

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

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 πŸ”₯πŸ§™β€β™‚οΈπŸ”₯ Author

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 πŸ”₯πŸ§™β€β™‚οΈπŸ”₯ Author

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 πŸ”₯πŸ§™β€β™‚οΈπŸ”₯ Author

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

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 πŸ”₯πŸ§™β€β™‚οΈπŸ”₯ Author

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 πŸ”₯πŸ§™β€β™‚οΈπŸ”₯ Author

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
vicoerv profile image
Collapse
vintharas profile image
Jaime πŸ”₯πŸ§™β€β™‚οΈπŸ”₯ Author

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

Collapse
errietta profile image
Errietta 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 πŸ”₯πŸ§™β€β™‚οΈπŸ”₯ Author

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 πŸ”₯πŸ§™β€β™‚οΈπŸ”₯ Author • Edited

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

Collapse
mitchjacksontech profile image
Mitch Jackson

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

Collapse
vintharas profile image
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
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 πŸ”₯πŸ§™β€β™‚οΈπŸ”₯ Author

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

Collapse
javaguirre profile image
Javier Aguirre

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

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