Figuring out JavaScript libraries for Vim autocompletion with TernJS in .tern_project file

Question

I love vim and want to keep using it to do web development although I am struggling setting up my .tern_project file with the correct libraries I need to do autocompletion. I am relatively new to JavaScript but what I have so far is making it a lot easier to learn.

There aren't many examples that I could find and I have tried to read the documentation but I do not know enough for it to be helpful. So far my .tern_project file looks like this:

{
  "libs": [
    "browser",
    "ecma6"
  ],
  "plugins": {
    "requirejs": {
      "baseURL": "./",
      "paths": {}
    }
  }
}

I don't really know what the plugins do but I left them in for now, in libs the ecma6 really helped me with all the array methods (ie. forEach etc.). Now my question is how do I add stuff like console.table() to autocomplete?

Which library do I need to add to the .tern_project file?

Also, I am open to suggestions for better web development environments.

Answer 1

• At this point all you've got is tern's default completion!!! Your .tern_project does not have any impact on completions that tern suggests because tern configuration file is .tern-project; Its Dash not underscore. so first rename it.

  .tern-project is a json configuration file which tells tern what completions it should suggest through two property: libs and plugins.

  ---

• plugins aren't much different from libs they tells tern to also suggest these completions you specify in addition to libs.

  For example in your .tern-project file you've choose to use requirejs plugin. so if you use requirejs library which is a module loader and helps with writing client side modular code, then it completes variables, functions and methods from other modules.

  ---

• console is a node's global. and to complete node stuff you should add node plugin. so your .tern-project file should be something like:

  {
    "libs": [
      "browser",
      "ecmascript"
    ],
    "plugins": {
      "node": {}
    }
  }
  

  Note that i've used ecmascript in place of ecma6. in previous versions tern had ecma5 and ecma6 libs but in latest versions these two got combined in one lib named: ecmascript.

List of available tern libs:

• browser
• chai
• ecmascript
• jquery
• react
• underscore

You could always get an updated list of libs from tern js repository defs directory

List of available tern plugins :

• angular
• commonjs
• complete_strings
• doc_comment
• es_modules
• node
• requirejs
• webpack

You could always get an updated list of plugins from tern js repository plugin directory

As your javascript skills grow go add and play with libs and plugins and see what completions you get. Also note that you could have multiple .tern-project file. Tern will always search upward to root directory and uses the closest one. so you could configure completions on a project basis.