DEV Community

Cover image for Vim on VSCode: Boost Your Productivity
Davide
Davide

Posted on

3 1 1 1 1

Vim on VSCode: Boost Your Productivity

If you want to speed up and enhance your programming experience on VSCode, one of the best choices is integrating Vim, a powerful and feature-rich text editor. Vim allows you to boost significantly your productivity.

Installing Vim on VSCode
1. Open VSCode
2. Go to the Extensions section
3. Search for “Vim” and select vscodevim
4. Click Install

Once the extension is installed, we’re ready to start using Vim! However, before diving in, we need to configure a few settings to ensure the keyboard shortcuts work correctly on all operating systems.

Configuring Keyboard Shortcuts

For Windows:

To set up your keyboard shortcuts, check the GitHub pages:
useCtrlKeys
handleKeys

You’ll find all the settings to customize Vim to your liking.

For Mac:

On macOS, the configuration is simpler.
Open the terminal and enter one of the following commands based on your VSCode version:

//For VSCode:
defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool false

//For VSCode Insider:
defaults write com.microsoft.VSCodeInsiders ApplePressAndHoldEnabled -bool false

//For VS Codium:
defaults write com.vscodium ApplePressAndHoldEnabled -bool false

//For VS Codium Exploration:
defaults write com.microsoft.VSCodeExploration ApplePressAndHoldEnabled -bool false

//To reset global defaults:
defaults delete -g ApplePressAndHoldEnabled

Enter fullscreen mode Exit fullscreen mode

Vim Keyboard Shortcuts

Once everything is set up, it’s time to learn the most useful Vim shortcuts that will help you navigate code, write, and edit more efficiently.

Movement in the Document:

• h =  Move cursor left
• j =  Move cursor down
• k =  Move cursor up
• l =  Move cursor right
Enter fullscreen mode Exit fullscreen mode

Text Insertion:

• i = Enter insert mode to the left of the cursor
• I = Enter insert mode at the beginning of the line
• a = Enter insert mode to the right of the cursor
• A = Enter insert mode at the end of the line
Enter fullscreen mode Exit fullscreen mode

Text Modification:

• x = Delete the character to the right of the cursor (equivalent to “Delete”)
• r = Replace the character under the cursor with another (Replace mode)
Enter fullscreen mode Exit fullscreen mode

Conclusion

With Vim on VSCode, you can make your coding experience much smoother and faster. Be sure to configure the keyboard shortcuts correctly to make everything even more efficient and intuitive. With these basics, you’re ready to start using Vim like a pro!

Happy coding! 🚀

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (4)

Collapse
 
axiol profile image
Arnaud Delante

Just be careful, doing that is the first step in the rabbit hole that vim is. Soon you'll find yourself installing nvim and building your own config

Collapse
 
sigoloh profile image
Augusto Sigolo

With the extension Learn Vim you can have a crash course on vim motions in VSCode as well. It is a good starting point

Collapse
 
sbre profile image
Davide

Thank you! I didn't know this extension.
I hope you enjoyed the article anyway

Collapse
 
sigoloh profile image
Augusto Sigolo

Loved it. Happy to help

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay