loading...
Cover image for Vim for People Who Use Visual Studio Code (Full Article)

Vim for People Who Use Visual Studio Code (Full Article)

codenutt profile image Jared Originally published at Medium on ・7 min read

Hot tips to bring the awesomeness of Visual Studio Code to Vim.

Front-Matter

I want to start by saying, this is not an editor-shame article. You can use whatever text editor you want. It really doesn’t matter. I’m only writing this because I found a level of productivity in Vim that I haven’t had in any of the editors I used before (Sublime Text, Atom or VSCode).

If you’ve heard about Vim, and want to try it out, I hope this article can provide a bit of familiarity you’d find from VSCode.

Vim for People Who Use Visual Studio Code
Keanu Believes in you. I believe in you.

Why Vim?

There are lots of reasons to use Vim, so here’s a few of mine.

Keep your hands at 10 and 2

Vim for People Who Use Visual Studio Code

When you are solely using the keyboard, there is going to be an inherent speed boost just from not having to physically move your hands. And hey, maybe you’re a black belt in mouse movement, and you can move back in forth with a speed invisible to the naked eye. For the rest of us simple humans, it takes time.

Let’s do some quick math.

Vim for People Who Use Visual Studio Code
Keanu Believes in you. I believe in you.

It takes 600ms to move my hand from the “home keys” to the mouse. On average, for sake of argument, I do that once a minute while I’m writing code. Whether that be to scroll, navigate to a new file, or something similar.

600 (wasted time in ms) x 60 (times per hour) x 5 (hours I am actually coding) = 180,000ms wasted =

  1. Minutes. Every. Day.

Yeah, okay, maybe that doesn’t sound so bad, but, those 3 minutes could be spent writing a function, or refactoring code, not flailing your hand about like your Harry Potter!

Speed

Vim for People Who Use Visual Studio Code
Okay, so maybe 65 isn’t really that fast anymore, but hey, this was 1994!

My favorite quote that describes what it’s like to code in VIM:

“Code at the speed of thought”

Vim is built around the idea that you are directly communicating with your computer. You tell it what you want, and it does it for you. The biggest eye-opener for me was this little tidbit:

To delete everything in between two objects (parentheses, quotes, etc), it's as simple as:

di'

Vim for People Who Use Visual Studio Code
Computer: Delete, inside, single-quotes.

That’s just the surface of amazing shorthand things you can do with Vim.

I’m a real programmer!

Part of the journey of learning VIM is exposing yourself to how UNIX works. I’m under the impression that the more you expose yourself to things like bash, the better programmer you are going to be.

Chances are, you have a pretty sweet command line setup. Wouldn’t it be nice if your code editor and your command line worked in concert?

How do you exit Vim?

Probability is high that you’ve ever edited a file on a Linux server, and couldn’t figure out how to exit the file. Let’s say, for example, changing an SSH key on Digital Ocean. If you know VIM…you don’t have to worry about that!

The real reason I switched to Vim

Honesty time. The real catalyst for wanting to switch to Vim was watching Kyle Mathews (creator of Gatsby.js) using it during a demo.

Ya caught me.

VS Code Features and their equivalents

Convinced? Cool, here’s some tools!

Plugin System

Vim by itself is pretty barebones. In order to add plugins, we have to have a mechanism to manage them. Enter Plug:

junegunn/vim-plug

Note: There are a few plugin managers out there. I landed on Plug for no particular reason. I like it, and I’ve had no issues with it. FYI, as far as I can tell, Vundle isn't regularly maintained anymore.

File Search

There has been a bunch of solutions for file searching over the years, as indicated by the multitude of answers in forums. I tried a couple of different ones, but landed on this combination:

Fuzzy Finder(fzf) + Ripgrep

Vim for People Who Use Visual Studio Code
Fuzzy search for "theme"

Fzf is a really well built/maintained fuzzy search that works in both the command line and vim.

Note: You may see Ag(Silver searcher) in a lot of articles, however the Ag related vim plugin is no longer maintained, so its suggested to use RipGrep.

Intellisense

The auto-completion system (Intellisense) in VSCode is arguably it’s best feature. Lucky for us, it’s been ported over to Vim!

neoclide/coc.nvim

Vim for People Who Use Visual Studio Code
autocompletion for importing a function written in another file in React

CoC has its own extension system, that mirrors that of VSCodes. It's easy to use and well documented (the most important part).

Note: You may see some old articles talking about YouCompleteMe, but as far as I can tell, that isn’t maintained anymore.

File System Explorer

VSCode, like most modern text editors, comes with a file explorer. Vim’s native netrw is alright, and I’ve seen quite a few articles saying you don’t need anything else, like here. However, I find NERDTree is too useful to not use.

scrooloose/nerdtree

Git integration

I gotta be honest here, I do most of my git stuff straight in Iterm. However, VSCode has an incredibly nice Git Diff split screen. To get that level of git integration, check out this plugin:

tpope/vim-fugitive

Vim for People Who Use Visual Studio Code

Additional plugins that you may want

This is some of the stuff I used in Visual Studio Code, that I wanted to bring into Vim.

Autocomplete Brackets

This nice little package will auto close those pesky brackets.

jiangmiao/auto-pairs

File Icons

This will add icons to stuff like NERDTree.

ryanoasis/vim-devicons

Prettier

Wouldn’t you know it, but the official prettier team has a vim plugin. How nice! Also, incredibly simple to set up.

prettier/vim-prettier

Get it to work on autosave, check out this article.

Snippets

Wouldn’t you know it, using the Conquer of Completion, you can import VSCode snippets!

Check this out to show you how to do that:

neoclide/coc.nvim

Here is the React snippets package I’m using.

xabikos/vscode-react

Additional Stuff

THE home for Vim plugins is Vim Awesome.

Vim Awesome

Great place to watch people use Vim:

Vimcasts - Free screencasts about the text editor Vim

Dotfiles

I have a few remapped keys to make things easier. Check out my dotfiles for all those.

DarthOstrich/dotfiles

Final Thoughts

My Journey

I solely use Vim now, after spending about a year to learn it. Initially, I was using it just for my personal projects, because my productivity level was low. I had to keep stopping to look up how to do something. However, I dropped VSCode completely about 4 months ago, and I don’t plan on going back.

It takes discipline

Learning Vim can seem daunting, and frankly, it is. It requires self-imposed discipline. However, doesn’t everything in development? There is no tool/language/framework I’ve ever learned that didn’t require some level of deliberate practice.

Vim is a lifestyle choice. It will take a while to get used to it, and it WILL be frustrating at times. However, if you stick to it, I guarantee it’ll improve your workflow. If you have any additional tips or questions, please drop them below. As always, happy coding!

Want more tips?

I've got a newsletter that you might like. I share web dev tips and tricks as well as stories about what it's like being a freelancer in Los Angeles. Check it out here

Additional Resources for learning

Mastering Vim Quickly — Jovica Ilic

8 Vim Tricks That Will Take You From Beginner to Expert

References

Switching to Vim

10 simple Linux tips which save 50% of my time in the command line

Discussion

pic
Editor guide
Collapse
sesamestrong profile image
Sesamestrong

Love the article! I recommend TabNine for Vim; it has the best autocompletion that I've ever seen. It uses GPT-2, OpenAI's text prediction model, and I often find it correctly autocompleting entire lines with it.
thepracticaldev.s3.amazonaws.com/i...

Collapse
dattran1999 profile image
dattran1999

Hey, I am trying to use tabnine in vim. I also love to use youcompleteme but idk how to make the 2 work together (like in vscode, tabnine will work alongside with intellisense). Do you have any suggestion?

Collapse
bharat profile image
Bharat

Tabnine is awesome. I have been using it with emacs for some time now. I am using the professional version which is currently free and in beta.

Collapse
sesamestrong profile image
Sesamestrong

I also use the Professional version; Deep TabNine is incredible and I can't wait until support is added for things like Salesforce's CTRL or other powerful text prediction models based on GPT-2.

Collapse
codenutt profile image
Jared Author

I just read an article about TabNine! I'll definitely check it out. Thanks!

Collapse
luisdavim profile image
Luis Davim

You should look into github.com/liuchengxu/vim-clap for a ⌘P like palette.
Also if you're using coc.nvim you probably don't need extra plugins for auto-pairs and formatting on save, you just need to set it up on coc.

Collapse
codenutt profile image
Jared Author

Good point, thanks!

Collapse
gui42 profile image
Guilherme Marthe

Is the Kyle Mathews demo you watched available anywhere online? Now I'm curious to check it out :D

This is a great article! Ill just share some talks that really got me into the vim mindset:

There were a few places that helped and are helping me.

  • Luke Smith's channel has helped me a lot with customizing my setup together with mapping shortcuts and guide navigation within vim. I've adapted his ideas into my language snippets, but I've tweaked a few things for my personal preferences.
  • For vim plugins and usage of more advanced features (ctags for example) this presentation has helped me a lot, even though I still think my setup kinda bloated.
  • After going to twitter and having a conversation with the amazing Julia Evans, one of her followers recommend me this talk. It was eye opener and is what started it all.
Collapse
codenutt profile image
Jared Author

I don't remember exactly which one it was, but here is the link to their webinars:
gatsbyjs.com/resources/webinars/

Thanks for the resources! Watching people use Vim is incredibly eye opening lol

Collapse
marschal profile image
marschal

Great article! But, did you missed pointing out to the Powerline extension or did I missed it? One of the greatest thing for vim imho.
I somehow stopped using vim for coding mostly because of the lack of a good intellisence plugins in the past. Will give it a try with your proposed plugins :)

Collapse
codenutt profile image
Jared Author

Thanks! I actually think I left powerline out because it's not something that you get from native VSCode, but it is an awesome plugin!

I would argue that because of the intellisense from CoC (or from what im hearing about TabNine) now is a perfect time to jump back in!

Collapse
captainawesomedi profile image
Di Wu

same here! I switch to vim with tmux 3 month ago. I used thoughtbot upcase video to learn from. Honestly, so far its been great. I can the biggest plus is I can navigate with in a file with so much precision.

Collapse
codenutt profile image
Jared Author

Agreed! Thoughtbot is great 👍🏻

Collapse
drsensor profile image
DrsEnsor

Thanks for writing this post. I'm currently in the process of migrating from VSCode to Vim to preserve more RAM and teach myself about langserver-protocol.

I use LangaugeClient-neovim + completor.vim as my daily driver. Avoiding coc.nvim because it depend on nodejs.

I'm still searching on something similar to "autocomplete as you type" but don't depend on any interpreter/runtime (pure binary executable).

Collapse
codenutt profile image
Jared Author

Interesting! Any reason why you are avoiding nodejs? I think most autocomplete plugins are going to require some type of runtime, but I could be wrong.

Collapse
drsensor profile image
DrsEnsor

For simple application, nodejs has a bigger memory footprint than python or lua. Also, by default, nodejs is not pre-installed in most of Linux distribution. But that's not the main case.

  1. If I use typescript langserver, then there will be 2 nodejs running at the same time. One for coc and the other is for tsserver. And if I use webpack hot-reload for developing an app, then there will be 3 nodejs running at the same time.

  2. Vim 8 and Neovim has their own asynchronous job control. So why not leverage those. This means that the lsp-client will share the same runtime as vim, no duplicate runtime.

Recently I found this article that explain about vim-LSC. The project is quite new and I'm not testing it yet, but it's interesting that there is an lsp-client written in pure vimscript.

Thread Thread
codenutt profile image
Jared Author

Interesting. Thanks for the info! I would prefer not to run 6 node servers either lol I haven't had any issues with Coc, but I definitely see your point.

Collapse
xsrvmy profile image
Rui Ming (Max) Xiong

Whta's your opinion on using the vscode vim plugin? I personally use that a lot but I find the issue with how undo works messy sometimes.

Collapse
codenutt profile image
Jared Author

Its okay. My issue with it isn't so much about the plugin but about myself. I used the plugin for about 6 months but my learning about vim quickly plateaued because i was still sticking to VS Code shortcuts. Its my personal opinion that in order to really get a benefit from Vim, its gotta be in Vim.

Collapse
pavanmehta profile image
Pavan Maheshwari

Do you have dotfiles to install everything? Or they can only br installed manually?

Collapse
codenutt profile image
Collapse
jessekphillips profile image
Jesse Phillips

You might want to support onivim.io/

New vim UI to natively support VS Code extensions and powered by a native vim backed (my understanding was supported by neovim development).

Collapse
codenutt profile image
Jared Author

Really interesting project. Will definitely start following it.

Collapse
eclecticcoding profile image
Chuck

Okay, time to spend more time with VIM than just README's.

So, what are your thoughts about VIM VS. NVIM?

Collapse
codenutt profile image
Jared Author

Ive only used Vim. Another guy i used to work with used nvim and he liked it. I don't think it really matters

Collapse
0x12b profile image
Simon Aronsson

Just FYI, Vundle is not deprecated. The Bundle commands in Vundle are however.

Collapse
codenutt profile image
Jared Author

Correct. Bad choice of words. I meant it hasn't been updated in a long time.

Collapse
wileymab profile image
Matt Wiley

Bravo

Great article! I use Vim regularly... but poorly. This has inspired me to supercharge my use. Thanks!

Collapse
codenutt profile image
Jared Author

Haha thanks! That gif is the greatest compliment anyone has given me