javascript development with vim

Vim is great as a lightweight editor for JavaScript programming. But pretty soon I end up missing some more advanced features like syntax checks and code completion. Syntax highlighting only takes you so far.

Recently I was working on a Node.JS project, so I thought I’d find me some plugins for Vim to get those more advanced development features. Vim is super extensible with its massive plugin ecosystem, but sometimes it can take some tinkering to get things to work. After a bit of searching and trying things out, I managed to get code completion working for JavaScript code, and have basic syntax checking active.

I found that the CoC plugin, in combination with some of its extensions work perfectly.

First you need to install the CoC plugin. This plugin is more of a framework to get code completion and VSCode-like features in Vim. So you can use this for other languages too, like Python, Rust, Java, PowerShell, C#, etc. You need Node installed for this to work, but if you’re working with JavaScript, you most likely have that installed already.

Once you have the plugin set up, you then add CoC extensions for the languages you want to use. For JS this turns out to be the TypeScript server plugin, which gives your JS & Typescript support, including JSX and TSX. I also added the JSON plugin.

To add the CoC extensions, open Vim and install the extensions using:

:CocInstall coc-json coc-tsserver

That’s about it. Now if you open up a .js file, you should be getting JS code completion. If you mess up some code, you’ll get some error indications in the margins, telling you something is not quite right with your code.
Handy stuff!

Yep. There’s clearly something wrong with that code.
Helpful code completion info right there.

A good way to find a list of more CoC extensions is through VimAwesome. There’s something in there for everyone it seems.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.