DEV Community

Cover image for How to add Vim to Visual Studio Code to speed up your coding!
Lakindu Kariyawasam
Lakindu Kariyawasam

Posted on

How to add Vim to Visual Studio Code to speed up your coding!

Nowadays, many developers use Visual studio code as their favourite because it's a lightweight IDE which is made by Microsoft for Windows, Linux and macOS that supports debugging, syntax highlighting, extensions, intelligent code completion, snippets, code refactoring, and embedded Git.

Vim is a powerful keyboard-based text editor that enables developers to code faster without lifting their hands off the keyboard.

There is a simple way to enable Vim in your favourite code editor within a few minutes.

How to setup Vim in visual studio code

  1. Open your visual studio code IDE, go to the 'extensions' tab and Search for Vim.

image

2.Double-check the version you got is similar to vscodevim.vim as the below image and hit install.

image

3.Setup key-repeat to make vim extension works better.
Google search vscode vim github and click the first result of vs code vim git repository or click this link below.
Link

image

4.Scroll down to the "installation" section and follow the installation steps according to your OS platform.

image

  • This is a handy thing to add especially when you are new to vim. because it allows you to hit the key and it repeats like in vim in terminal. ex:- hit j to move down

5.Restart VS code

Testing Vim on VS Code

1.Create a new file on VS Code

image

Now you can see the cursor is a bit wider than before.

2.Press i to get into "insert mode" and hit enter like 4-5 times to move the cursor down.
image

3.Now press and hold k to see if your cursor goes up.
If it moves smoothly, then you have enabled it successfully.

image

If it gets stuck, then try restarting the VS Code or repeat step 4 in the "How to setup visual code" section.

Using Vim inside the VS Code really improves the speed of your coding once you get familiar with Vim's shortcuts.

So, there you have the Vim editor installed successfully in VS Code.
Enjoy! :D

Top comments (1)

Collapse
 
andyalex234 profile image
Andenet Alexander • Edited

VS Code extension that lets you open a vim cheatsheet directly in the editor to expand your vim vocabulary. πŸ‘‡
marketplace.visualstudio.com/items...