Webclipse

Using Content Assist for JavaScript with JSjet

The ability to quickly code with content assist is a must for the modern JavaScript developer. JSjet utilizes the Tern inference engine to deliver superior JavaScript content assist in Eclipse. JSjet is available in Webclipse or MyEclipse.

Back to Learning Center

Download Webclipse

JSjet was introduced in version 2016 CI 3 of Webclipse and MyEclipse.

Content Assist for JavaScript

The JavaScript editor provides content assist proposals for the current context whenever you press Ctrl+Space.

JSContentAssist
JavaScript content assist example

 

Local JavaScript variables and functions are also made available in the content assist proposals. In the example below, pressing Ctrl+Space completes a function call automatically.

jsoverview_codeassist_local
Local JavaScript Function completion

 

Code Completion Guess Support

When a content assist proposal is applied, a second set of proposals will automatically display probable matches based on the type of the function parameter. Learn more about Guess Support

guess_support
Guess support

 

Completion String Support

String completion gathers short strings in your code, and string completion suggestions include previously seen strings. Learn more about String Support

string_completion
String completion


ECMAScript 6

Switch to ECMAScript 6 for Promise support. 

promise_support
Promise support

 

RequireJS Object Literal Completion

For the RequireJS config object, applying completion generates a property key/value pair.

requirejs
RequireJS completion

 

Better Content Assist with Tern Modules

Access to content assist for a large number of third-party framework libraries is available through project properties. When including third-party JavaScript frameworks, you must either include the framework scripts within the project, or reference them on the web. The Tern modules available on the Technologies tab offer predefined content assist for various technologies. For the best possible content assist for third-party frameworks you include directly in your project, you should exclude framework scripts, and then select the framework technology. This exclusion only applies to content assist.

  1. Right-click a project, and select Properties.
  2. Navigate to JavaScript>Include Path (or, in MyEclipse, MyEclipse>JavaScript>Include Path), and select the Source tab.
  3. Expand your project folder, and double-click Excluded. 
    InclusionPatterns
    Adding exclusions

  4. Click Add in the Exclusion patterns section.
  5. Enter a pattern for multiple exclusions, or browse for a specific folder or file, and click Finish.
    JSAddExclusions
    Framework script file excluded

  6. On the Technologies tab, select the framework you excluded to get optimal content assist for the framework, and click OK.
    JSTechnologiesTab
    Available third-party content assist libraries

Additional Context for Content Assist (Optional)

You can add source files and folders to the global scope to include additional context for content assist. JavaScript files in these folders are parsed and added to the JavaScript project’s global scope. Objects, fields, and methods defined in these files are provided as options for content assist even when you are editing another JavaScript file.

To add source files to the project:

  1. Right-click a project, and select Properties.
  2. Navigate to JavaScript>Include Path (or, in MyEclipse, MyEclipse>JavaScript Resources).
  3. Click the Source tab, and click Add Source Folder to specify a source folder.

In Web projects, the WebRoot folder is automatically set up as a source folder when the project is created. This can be easily changed to suit your needs. Adding files to a source folder is necessary only if you need additional context for content assist. Content assist for an element within a given source file is provided even if it is not part of the global scope.

JSIncludeSource

Specifying a source folder

 

Adjusting Performance Settings

You can adjust the performance/quality setting or set a scope for the JavaScript analysis to improve performance when working with large projects. These settings are available both globally and at a per project level. 

To adjust performance settings:

  1. Right-click a project, and select Properties.
  2. In Webclipse, navigate to JavaScript>Performance (or in MyEclipse, navigate to  MyEclipse>JavaScript>Performance).
  3. Set your performance preferences for the project or click Configure Workspace Settings to select preferences globally. 

JSPerformance
JavaScript Performance Preferences