tern-outline provides the outline Tern plugin which gives a support for Outline. This plugin is used by Tern Outline 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 Outline 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 Outline View with Window/Show View/Other... and select JavaScript/Tern Outline:

Use View

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

Tern Outline 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 Outline View with JSDT Outline:

You can notice :

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

ES6

As tern is based on acorn, it can parse ES6 syntax.

ES6 class

Outline is able to display ES6 class.

ES modules

Outline is able to display ES modules:

Extension

The tern outline 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 have feedback 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.