JavaScript Autocompletion on Vim

Node, react, underscore, browser and jquery support!

image

There are a few options available for javascript autocompletion using vim. If you need to work with Flow or Typescript you’ll probably want to set up a solution like deoplete, but that’s not our case right now.

This guide is focused on setting up autocompletion for the basic javascript environments and libraries used nowadays on web development courses and bootcamps. We’re talking about node.js, react.js, underscore.js,the immortal jquery, and browser objects and methods (like the basic console.log() or document.getElementById()).

Let’s accomplish that taking 3 steps:

1. Set up omni completion

Open your .vimrc file and add the following lines:

image

(… and that will be enough to provide you CSS autocompletion too, as written on this post!).

2. Install vim-plug

You can check another fancy alternatives on the installation guide but basically you just need to download the plug.vim file, and place it inside ~/.vim/autocomplete/ folder (create autocomplete/ folder if it doesn’t exists).

3. Install and set up tern_for_vim

  • To install tern_for_vim via vim-plug, you must open your .vimrc file and add the following lines:

image

(Thanks Alexander Sullivan, and MisterOccan for the tip ‘do’: ‘install’)

"-- PLUGINS (Using junegunn/vim-plug) --
call plug#begin()
Plug 'ternjs/tern_for_vim', { 'do' : 'npm install' }
call plug#end()
  • Restart vim and, in NORMAL mode, type :PlugInstall. This is a vim-plug command that installs all plugins listed on .vimrc file. (Check all vim-plug commands here).

image

  • Create the Tern config file on your user directory, the file name must be ~/.tern-project, open it and include the following lines:
{  
  "libs": [  
    "browser",  
    "ecmascript",  
    "jquery",  
    "react",  
    "underscore"  
  ],  
  "plugins": {  
    "node": {},  
    "esmodules": {}  
  }  
}

image

The file has a JSON structure but DON’T include a .json extension!

… And now you’re good to go!

Open any javascript file that you want to work with, start typing the object’s or method’s name and hit <C-x> (Ctrl + x) then <C-o> (Ctrl + o) to show the autocompletion panel.

image

tern_for_vim show hints on top of your window.

That’s it!


(👆 This is an affiliate link. If you got any value from this post and are also interested in buying the MVQ book/screencasts, please consider visiting the affiliate link and you’ll be gifting me a coffee ☕ or a beer 🍺.)


Footnotes:

  • alldrops.info is the TRUE and FOREVER FREE home for the previously used medium.com/vim-drops publication. At alldrops.info you’ll always find all posts without Medium.com restrictions.
  • If you have any doubts or tips about this article, I’d appreciate to know and to discuss it on the comments section, or via email.
  • Do you have any other vim tips? Would you like to publish that on this blog? Please send an email to vimdrops.
  • As English is not my native language, I apologize for errors. Corrections are welcome.
  • Contact: vim [@] alldrops [.] info.

Read more on vim drops: