Tern Outline support

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 :

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) :

Open View

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

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 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:

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 :

• angular modules, controllers like https://github.com/angelozerr/angularjs-eclipse/wiki/Angular-Explorer-View
• grunt/gulp tasks like https://github.com/angelozerr/jsbuild-eclipse/wiki/Getting-Started#build-explorer

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.