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:
Plug 'Valloric/YouCompleteMe'
to your {home-directory}/.vimrc
:call plug#begin('~/.vim/plugged') Plug 'Valloric/YouCompleteMe' call plug#end()
:PlugInstall
command to get vim-plug to install the plugin you’ve added to .vimrc
.{home-directory}/.vim/plugged/YouCompleteMe
(the plugged directory is where vim-plug clones the git repositories pulled from github) 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.
Hey, Alex, I’m another Alex and I find you’re article very helpful =)
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.
Very very very helpful. Thank you Alex!