JSjet for Modern JavaScript in Eclipse

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

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.

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.

Section 5: Code Completion

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

Advanced Code Completion Features

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!

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.

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.

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.

Section 10: Navigation

Navigate faster to the code with the following shortcuts:

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

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.

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.

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.

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.

Tip: Some debugger shortcuts are provided below:

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.