JavaScript autocomplete in Vim for jQuery and other external JS libraries

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

    Just YouCompleteMe

    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()
    

    YCM with Tern for Vim

    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.

    YCM + Tern for Vim + eager loading of 3rd party libs
    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.

    3 comments on “JavaScript autocomplete in Vim for jQuery and other external JS libraries

    1. With new versions of YCM there is no use to install tern_for_vim, tern server is already included and installed by YCM. No additional plugins required.

    Leave a Reply

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