Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

JSjet for Modern JavaScript in Eclipse

DZone's Guide to

JSjet for Modern JavaScript in Eclipse

How to start using the JSjet tool to use Eclipse to develop great JavaScript applications.

Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Section 1: About JSjet

JSjet brings modern JavaScript to Eclipse. A powerful inference engine allows JSjet to build a more accurate model of JavaScript resources, including ES6, resulting in exceptional content assist, occurrence highlighting, call and type hierarchies, and an outline view. Extensive syntax highlighting along with fast, accurate validation are just a couple of reasons you will love JavaScript development in Eclipse with JSjet. Plus, with the ability to jump to declarations, rename refactoring and source formatting, you’re bound to find a favorite.

Section 2: Installing JSjet

Source

Method

Install from Marketplace

Drag This to Eclipse

Install from update site

https://www.genuitec.com/updates/webclipse/ci/


Tip: Use MyEclipse? JSjet features are included in MyEclipse 2016 CI 3 and later.

Requirements and Compatibility

  • Eclipse Neon(4.6), Eclipse Mars (4.5) or Eclipse Luna (4.4)
  • Eclipse for Java EE or Discovery Site Available
  • ~60MB Diskspace for Plug-ins
  • Windows 32/64-bit, Linux 32/64-bit, Mac 64-bit

Section 3: JavaScript Modules

With JSjet you can easily configure dozens of JavaScript frameworks for use in your project. These frameworks give you superior content assist for selected frameworks along with documentation.

JavaScript Modules

To add these modules, from a JavaScript or a Dynamic Web project, choose Properties > JavaScript > Include Path and On the Technologies tab, select the framework you excluded to get optimal content assist for the framework, and click OK.

Section 4: JavaScript Editor

JavaScript files are opened by default with the JSjet JavaScript editor which provides first class content assist, refactoring, validation and navigation support. We will discuss each of those sections in detail below.

JSjet Syntax Highlighting

Section 5: Code Completion

Pressing on the JavaScript editor offers suggestions for variables, types, methods, functions and so on.

Action

Shortcut

Invoking Content Assist

Ctrl + Space

Toggle Comment

Ctrl + /

Remove Block Comment

Ctrl + Shift + \

Generate Element Comment

Alt + Shift + J

Correct Indentation

Ctrl + I

JavaScript content assist example

Advanced Code Completion Features

Guess Support

Guess support

String Support

String Support

ECMAScript 6 Support

ECMAScript 6 support

RequireJS Object Literal Completion Support

RequireJS support

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

Section 6: Validation

No more waiting to test your web application before knowing something isn’t quite right. Instant validation of your JavaScript, yes even ES6, immediately alerts you when there is a problem with your code. Validation is both at the in-editor level as well as across your project. And don’t worry, unlike regular Eclipse taking minutes (hours?) to finish, JSjet validates huge projects in seconds!

JSjet Validation

Tip: You can easily control the ECMAScript compliance setting for your project from the JavaScript property page. To change the ECMAScript version, right click on the project and choose Properties > JavaScript. Choose the ECMAScript version from the ECMAScript Compliance dropdown.

Section 7: Call and Type Hierarchies

The Call Hierarchy view enables you to easily visualize the flow of your code by viewing all calls to and from a selected function. JSjet takes this handy view a step further by allowing you to view hierarchies for methods, fields and variables. Another invaluable view is the Type Hierarchy. JSjet provides strong support for type hierarchies. This view will likely become a favorite if you are taking advantage of the new classes capability in ES6.

Action

Shortcut

Open Type Hierarchy

F4

Open Call Hierarchy

Ctrl + Alt + H

Quick Type Hierarchy

Ctrl + T

JSjet Hierarchy Views

Section 8: Source Formatting

You can quickly format either highlighted sections or the entire JavaScript file from the JavaScript editor. Place your cursor anywhere in the file to format the entire file or select a section of code to format only a specific section.

Action

Shortcut

Format

Ctrl + Shift + F

Toggle Comment

Ctrl + /

Remove Block Comment

Ctrl + Shift + \

Generate Element Comment

Alt + Shift + J

Correct Indentation

Ctrl + I

Source formatting

There are a number of preferences you can set for source formatting. To access these preferences in Webclipse, go to Windows>Preferences>JavaScript>Code Style>Formatter. Or, in MyEclipse, go to  Windows>Preferences>MyEclipse>JavaScript>Code Style>Formatter.

Section 9: Refactoring

Like Java refactoring in Eclipse, inline and rapid refactoring support for JavaScript is critical to keeping projects clean and readable. Maybe you’ve avoided renaming in JavaScript or done it the hard way due to a mistrust of Eclipse’s rename refactoring capabilities. Don’t let your code get ugly, or worse, require extensive comments! Finally, there is JavaScript refactoring you can trust with accurate rename refactoring for variables and functions throughout your entire project.

Action

Shortcut

Rename

Alt + Shift + R

Move

Alt + Shift + V

JSjet Refactor

Section 10: Navigation

Navigate faster to the code with the following shortcuts:

Action

Shortcut

Open Declaration

F3

Open Type Hierarchy

F4

Open Call Hierarchy

Ctrl + Alt + H

Quick Outline

Ctrl + O

Quick Type Hierarchy

Ctrl + T

Outline:

Use the Outline view to clearly see the structure of a file in its entirety. JSjet includes rich support in the Outline view due to its thorough understanding of JavaScript, including ES6. Simply click an element in the outline to jump to that section in your code.

:JSjet Code Visualization

Jump to Declarations:

JSjet’s inclusion of a reliable Open Declaration option is a real timesaver for the modern JavaScript developer. This is especially useful when working with a large number of libraries and you really don’t recall where a given function is coming from. Now it’s a breeze to jump to the declaration for the current object, whether a method, field, or function. This includes declarations in the current file or another file in the project.

JSjet Open Declartion

Occurrences Highlighting:

The advanced understanding of JavaScript that makes the Outline view with JSjet so superior, also provides outstanding occurrence highlighting. Occurrence highlighting helps you understand the role of particular methods and variables in your JavaScript code. Click a variable or method in a file to view all occurrences of the selected item within the file. Combine this feature with the Outline view for a nice way to visualize and navigate code.

Occurrence Highlighting

Tip: Find objects faster from the Outline by understanding what each icon means:

Icon

Type

number.gif

Number

string.gif

String

boolean.gif

Boolean

array.gif

Array

object.gif

Object

prototype.png

Prototype

Function

unknown.gif

Unknown

Section 11: Performance Tuning

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.

JavaScript Performance Preferences

Section 12: Debugging

A powerful debugger is a must for any software development. JSjet includes a powerful JavaScript debugger that allows you to debug code from within Eclipse using the same interface as the Java debugger you love. For debugging web pages, JSjet’s Debugger integrates with Google Chrome giving you best in class support for page inspection alongside your integrated debugger.

If Node.JS is your preference, no problem, JSjet can debug it too! Watch productivity soar as you work with the external browser you prefer for a real-world rendering experience.

Debug Perspective

1. Debug a Generic Web Application

To debug a generic web application, you must have Google Chrome installed. When you start the debugger, Google Chrome opens automatically. There are multiple ways to start the debugger.

From the Project Explorer

Right-click on the web project or enterprise application project (EAR) and select Debug As>JavaScript in JavaEE Web Application; or, select the project and click  debugicon2 (select JavaScript in JavaEE Web Application and click OK if the project is not deployed).

From the Server View

After the project has been deployed to the server, right-click on the project in the Servers view and select Launch JavaScript Debug Session; or, select the project and click debugicon2.

From Debug Configurations

Select Debug Configurations from the Run menu. Select your project from the JavaScript in Web Application folder and click Debug.  

2. Debug a Node.js Application

To debug Node.js applications, you must have Node.js installed. There are multiple ways to start the debugger.

From the Project Explorer

Right-click on the JavaScript file and select Debug as>Standalone Node.js Application; or, select the JavaScript file and click debugicon2.

From Debug Configurations

Select Debug Configurations from the Run menu. Select your project from the Standalone JavaScript Application folder and click Debug.  

Tip: Some debugger shortcuts are provided below:

Button

Purpose (shortcut)

Resume (F8)

Suspend

Terminate (Ctrl + F2)

Disconnect

Step Into (F5)

Step Over (F6)

Step Return (F7)

Drop to Frame

Use Step Filters (Shift + F5)

3. Source Map Support

If you are using a tool for transpilation (such as TypeScript or Coffeescript), minification (such as minifyJS or UglifyJS) or bundling (such as Browserify), Source Map Support allows you to easily debug your JavaScript files by allowing the debugger to represent current code execution position in the context of the original file.

Tip: If you are using source maps, select  Enable source maps support on Debug Configurations. You will also need to properly configure your processing tool.

4. Hot-Swap JavaScript Code

Hot-swap JavaScript code to browser option to automatically view JavaScript changes directly in the Browser without reloading the page.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
web-dev ,javascript ,eclipse

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}