Omni Completion and JavaScript

This week I tried out Visual Studio Code (VSCode), a new editor from Microsoft that has features focused on web development. One of the cool things about it is it brings IntelliSense to JavaScript developers, and it’s cross platform as well — it supports Mac OS X, Linux, and Windows.

IntelliSense is one of those things that works well if you’re learning a codebase or API, and work with a strongly typed language. Because languages like C# have detailed type hints, IntelliSense is able to provide a rich completion interface that helps you find the right objects and methods. Visual Studio also encourages code comments, and makes typing Microsoft’s XML-style comments quite easy.

JavaScript isn’t C#, however, so VSCode has to do some extra magic to dredge up the right type hints. It works by using Microsoft’s TypeScript definition files. It’s a little bit like ctags — you effectively have a tags file that maps between names and values to aid completion. Type definition fines are written partly by hand, though, so it’s not quite as easy as ctags.

If you think IntelliSense for JavaScript looks cool, then you can get this kind of behaviour in Vim as well. One way to do it is with ctags — you’ll need to install Exuberant Ctags for your platform, and then you’ll probably want to use a plugin to make tag generation automatic. I wrote an introduction to ctags to get you started.

Because JavaScript is a little bit awkward, though, you can go a step further by using a tag generator that understands JavaScript and more recent things like Node modules. The vim-nodejs-complete plugin is actually easy to install, and will give you completion for Node’s built-in modules and the modules in your current project’s ./node_modules folder. Here's an example where I can see all of the methods on the process object:

You just need to get used to using the omnicomplete shortcut, which is C-x C-o.

There’s also a project called Tern, which is a “code-analysis engine” for JavaScript. It runs as a server that a Vim plugin queries for information about a given function, type, or variable. It even supports renaming variables — take a look at the Tern for Vim repository for more information.

There are many more Vim plugins and JavaScript projects that can enhance working in Vim, so it’s worth taking the time to explore them to see what works for you.