JavaScript Semantic Completion through Tern

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.
} );

FAQ

When I open a JavaScript file, I get an annoying warning about .tern-project file

Read the instructions above. If this is still really annoying, and you have a good reason not to have a .tern-project file, create an empty .tern-config file in your home directory and YCM will stop complaining.

What's the difference between this and tsserver ?

The default semantic engine used by YCM for JavaScript is tsserver - the server that is part of the TypeScript language. This has pretty good support for JavaScript and has additional features like diagnostics, refactoring and signature help. For many users, this is a strict advantage.

However, historically, JavaScript support in YCM used Tern (these instructions), and we wanted to keep unofficial support for it because;

• we don't want to break existing user setups
• Tern has more flexible inference engine than tsserver (e.g. see https://github.com/ycm-core/YouCompleteMe/issues/3625#event-3140989649)

Why did you switch to tsserver?

Tern is no longer maintained, and (as described in the previous answer) tsserver has more functionality than Tern in certain areas.

How do I choose between tsserver and Tern?

If you're already using Tern and it's working for you, there's no need to change, but we won't be updating the support for Tern further.

Otherwise, use tsserver. If you have problems such as these, switch to Tern and see if that's better for you.