Skip to content

Tern Outline support

Angelo edited this page Aug 12, 2015 · 14 revisions

tern-outline provides the outline Tern plugin which gives a support for Outline. This plugin is used by Tern Explorer View to fill it with the current content of JSDT JavaScript editor :

Tern Explorer- Show View

This View provides the same features than JSDT Outline but it tries to improve it.

Tern Explorer View

Outline Module

After installing and converting your project as Tern Project (see Tern-Eclipse-IDE), open Project Properties, click on Tern / Modules item and select the Outline tern plugin (ECMAScript tern plugin must be selected too) :

Check Outline Plugin

Open View

Open the Tern Explorer View with Window/Show View/Other... and select JavaScript/Tern Explorer:

Tern Explorer- Show View

Use View

The view displays the outline of the current JavaScript editor and is refreshed as soon as the editor content is changed:

Tern Explorer

Tern Explorer vs JSDT Outline

Takes the following sample:

var arr = ["string"];

var n1 = 10;
n1 = "";

function sum(x1, x2) {
	var tmp = x1 * x2;
	return tmp;
}

var n2 = arr;

and compare the Tern Explorer View with JSDT Outline:

Tern Explorer- Show View

You can notice :

  • arr is an array of string (JSDT Outline doesn't shows that).
  • n1 is a number or a string (JSDT Outline doesn't shows that).
  • sum function body contains tmp variable (JSDT Outline doesn't shows that).
  • sum function returns a number (JSDT Outline doesn't shows that).

ES6

As tern is based on acorn, it can parse ES6, so tern explorer will be able to display ES6 class.

Extension

The tern explorer will be able to display :

Why an another View?

The content of this view should :

  • appears in the Navigator View. Today it's not possible, because I would like hav efeedback about the outline (performance problem?)
  • appears in the clasic Outline. Today it's not possible because JSDT doesn't provide the capability to extend the Outline.
Clone this wiki locally