Skip to content

JavaScript Semantic Completion through Tern

micbou edited this page Jul 24, 2018 · 5 revisions

JavaScript quick start

  1. Install Node.js and npm.

  2. Add --js-completer when calling the install.py script.

  3. Create a .tern-project file in the root directory of your JavaScript project, by following the instructions in the Tern documentation.

  4. Edit a file from your project.

Explanation

JavaScript completion is based on Tern. This completion engine requires a file named .tern-project to exist in the current working directory or a directory which is an ancestor of the current working directory when the Tern server is started. YCM starts the Tern server the first time a JavaScript file is edited and uses its directory as the working directory, so the directory of that file at that time needs to be a descendent of the directory containing the .tern-project file (or that directory itself).

Alternatively, as described in the Tern documentation, a global .tern-config file may be used.

Multiple Tern servers are not supported. To switch to a different JavaScript project, you need to restart the Tern server using the RestartServer subcommand while editing a file of that project:

:YcmCompleter RestartServer

Tips and tricks

This section contains some advice for configuring .tern-project and working with JavaScript files. The canonical reference for correctly configuring Tern is the Tern documentation. Any issues, improvements, advice, etc. should be sought from the Tern project. For example, see the list of tern plugins for the list of plugins which can be enabled in the plugins section of the .tern-project file.

Configuring Tern for node support

The following simple example .tern-project file enables nodejs support:

{
    "plugins": {
        "node": {}
    }
}

Configuring Tern for requirejs support

The Tern requirejs plugin requires that all included "libraries" are rooted under the same base directory. If that's not the case for your projects, then it is possible to make it work with appropriate symbolic links. For example, create a directory ext_lib within your project and populate it with symlinks to your libraries. Then set up the .tern-project something like this:

{
  "plugins": {
    "requirejs": {
      "baseURL": "./ext_lib",
    }
  }
}

Then, given the following structure:

./ext_lib/mylib (symlink)
./ext_lib/anotherlib (symlink)

Can be used as follows:

define( [ 'mylib/file1', 'anotherlib/anotherfile' ], function( f1, f2 ) {
    // etc.
} );