Skip to content

Tern Outline support

angelozerr edited this page Dec 7, 2015 · 14 revisions

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 :

Tern Outline- Show View

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

Check Outline Plugin

Open View

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

Tern Outline- 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 Outline

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:

Tern Outline- Show View

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.

ES6 class outline

ES modules

Outline is able to display ES modules:

ES Modules outline

Extension

The tern outline 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 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.
Clone this wiki locally