Skip to content

Tern Advanced Completion

angelozerr edited this page Oct 10, 2014 · 4 revisions

Advanced completion

Tern uses JSON Type Definition to define a JavaScript framework. Tern IDE uses this information :

  • to provides completion.
  • to apply completion item.

Since 0.7.0, Tern IDE provides two settings for content assist :

Content Assist preferences

  • Generate anonymous function : to generate anonymous function with well parameters when compeltion is applied for parameter which defines a function.
  • Expand function : to shows a compeltion item per function which defines optional parameters.

Generate anonymous function

"Generate anonymous function" option which is used to generate anonymous function (if completion item has a function as parameter when completion item is applied.

TODO : add a preference page to enable/disable this option.

Takes a sample with Node#addEventListener(type: string, listener: fn(e: +Event), capture: bool). The method addEventListener of the node waits a listener function which can be an anonymous function :

var elt = document.getElementById('MyId');
elt.addEventListener('click', function(e)) {
	
}, capture)

browser.json JSON Type Definition, defines 'addEventListener' like this :

"addEventListener": {
        "!type": "fn(type: string, listener: fn(e: +Event), capture: bool)",
      },

Tern IDE is enable to use this listener signature, to generate automatically the anonymous function when completion item is applied.

Takes a sample. Here how Tern IDE can help you to write this JavaScript :

var elt = document.getElementById('MyId');
elt.addEventListener('click', function(e)) {
	
}, capture)

Open completion for methods of document :

Document completion

Do the same thing for elt variable :

Elt completion

Now let's see how to "generate anonymous function" option can help you. Select addEventListener.

The completion applied, uses JSON Type Definition to generate addEventListener parameters and an anonymous function for listener parameter with a e parameter :

Apply completion

After applying completion, the first parameter type is selected, change it if you wish :

Type param completion

Click on Tab to select the next parameter e , change it if you wish :

Event param completion

Click on Tab to select the focus inside the generated anonymous function :

Inside function completion

You can use Tab to select anew parameter type. Click on Esc to break this mode.

Note that, tern knows that e variable is an Event type. You can open completion for e :

Event completion

Expand function

With expand selected :

With expand completion

Without expand selected :

Without expand completion

Clone this wiki locally