Home

Intelligent code completion in javascript with Tern project

One of popular features provided by various IDE-s is intelligent, context aware code completion. Benefits are well known – you don't have to remember whole list of methods, functions and tons of your API documentation

I meet very often statement, that such feature is available only in "huge" IDE, and it's so critically important, that using more traditional editors (like old good ViM) are disqualified as a tool for serious programmer work. In this blog entry, I will show how to achieve context aware code completion in lightweight editors.

It's good to have lightweight alternative for a resource hungry IDE. In this blog entry, I will show, how with one plugin and dedicated tool, that analyzes javascript code achieve same feature in a ViM editor. Although whole process is described for this editor, there are different integrations available for other editors and IDE-s.

Tern - Intelligent JavaScript tooling

Our completion engine will be Tern (http://ternjs.net) . It's server application, written in node.js. It analyses JavaScript files, and as outcome it retrieves informations about structure of code, including function, methods, classes and documentation of those. From our perspective, this tool offers set of useful features:

Type inference engine

  • - It's mechanism, know from various functional languages, like SML – engine tries to retrieve (using passed arguments and context of function/method usage), type of arguments and type of value returned by functions. Javascript is language with weak type system, and it causes that interference can give various, sometimes inaccurate results. But it is also quite good, additional documentation and can be usefull

  • RequireJS support According to the documentation, this tool can use dependency management system, described in requirejs system.

  • Docblock support

  • - Using docblock, this tool with add contextual documentation in a completion list.

  • Plugin mechanism - plugins extend engine features and give support for hints for popular js libraries. You can find full list of plugins here: https://www.npmjs.com/browse/keyword/tern

Installation and integration with ViM

In case of old good ViM installation is very easy, assuming that you are using pathogen plugin. Whole process is following:

1. If you haven't installed nodejs: sudo apt-get install nodejs

2. In directory ~/.vim/bundle/ download plugin from github: git clone https://github.com/marijnh/tern_for_vim

3. In subdirectory of downloaded plugin (~/.vim/bundle/tern_for_vim/) install tern and its dependencies: npm install

It ends installation of plugin. You need also to create configuration for your project in form of file .tern-project in main directory of project. For example, such file for one of my Drupal projects looks like follow:

{
  "libs": [
    "browser",
    "jquery",
    „underscore”
  ],
  "loadEagerly": [
    "misc/*.js"
  ],
  "plugins": {
    "requirejs": {
      "baseURL": "./",
      "paths": {}
    }
  }
}

In this case, we loaded informations about jQuery, Underscore libraries and browser (built-in API available in modern browsers). We assume, that in addition to those libraries (and file loaded in a editor), we load always files from misc subdirectory (section loadEagerly).

You can find more configuration details here. After setup, code completion in ViM should work flawless. In case of ViM, you have to use CTRL-X CTRL-O shortcut for code completion. You can also can use awesome youcompleteme.

Other possibilities

There are few additional features, that are out of scope of this blog post:

  • Intelligent re-factorization
  • Detection of references to various code elements like, function, methods etc.
  • Displaying documentation of selected code element.

If you want to know more details, check vim plugin documentation.

References

Written by Jarek Sobiecki
  • Toolkit