If you enjoy Vim but feel it’s lacking autocomplete especially with regards to external libraries take a look at YouCompleteMe with Tern. What follows is a quick guide to setting up both these Vim plugins and getting Vim to behave intelligently with JavaScript sources.

Step 1: vim-plug

Because we’ll be using a number of plugins it would be wise to get some help to manage them.
vim-plug allows us to do this, it integrates neatly with Github, pulling vim plugins directly from Github allowing us to install them using the Vim command :PlugInstall.

Follow the guide to get vim-plug installed and then come back for step two.

Step 2: YouCompleteMe

Our first plugin is YouCompleteMe a code completion engine for Vim. Installation can be summarised as follows:

Get vim-plug to grab YouCompleteMe by adding Plug 'Valloric/YouCompleteMe' to your {home-directory}/.vimrc :

call plug#begin('~/.vim/plugged')
Plug 'Valloric/YouCompleteMe'
call plug#end()

Run the :PlugInstall command to get vim-plug to install the plugin you’ve added to .vimrc.

CD into {home-directory}/.vim/plugged/YouCompleteMe (the plugged directory is where vim-plug clones the git repositories pulled from github)

Run the install script from within this directory – this is OS specific so consult the docs on their Github page for your OS.

Remember to follow the JS guide and compile with --tern-completer

This gives us an autocomplete engine, helpful, but we start to get closer to our goal when we introduce Tern.

Step 3: Tern for Vim

Tern is a code analysis engine for JavaScript. On it’s own it acts as a server – it tells you information about JavaScript files, type information, documentation and function signatures.

Not much use on it’s own but when we pair it with Tern for Vim; a Vim plugin that fires up a Tern server and interacts with it based on what we’re editing we get something a bit more powerful.

To install simply add to your .vimrc :

Plug 'ternjs/tern_for_vim'

call plug#begin('~/.vim/plugged')
Plug 'Valloric/YouCompleteMe'
Plug 'ternjs/tern_for_vim'
call plug#end()

Now we can see some decent code suggestions… but only for our code.

How do we get Tern for Vim to recognise 3rd party libraries especially when there’s no way of inferring this from the JavaScript file?

Step 4: Activate library autocompletion by editing .tern-project

The .tern-project file configures the Tern server that’s running within Tern for Vim. We can specify which JavaScript files it should scan in here.

{
  "libs": [
    ],
  "loadEagerly": [
      "/home/alex/js-test/js/jquery-2.2.0.js"
    ],
  "plugins": {
      "requirejs": {
            "baseURL": "./",
            "paths": {}
          }
    }
}

Create a .tern-project file in the directory where you edit js files and paste the above into it.

We want to edit the loadEagerly part above and provide it with the library we want to load – in this case jQuery.

Finally we have autocompletion and doc support – loaded at the top.

Step 5: A Formal Directory Structure

We can use globs in the loadEagerly section of .tern-project:

  "loadEagerly": [
      "/home/alex/js-test/js/**/*.js"
    ],

Now we can have a fixed directory structure. All we need to worry about is popping our js libraries into the /home/alex/js-test/js/ folder and they’ll be picked up by Tern when we enter Vim. Be wary this folder doesn’t contain any more than is necessary. I made the mistake of including the wrong directory that contained 1,000s of none js files – suffice to say it crashed Vim and brought the CPU to a halt.

That’s it, hopefully everything’s gone through smoothly let me know if it hasn’t.