JSjet for Modern JavaScript in Eclipse
How to start using the JSjet tool to use Eclipse to develop great JavaScript applications.
Join the DZone community and get the full member experience.
Join For FreeSection 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 | |
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.
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.
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 |
Advanced Code Completion Features
Guess Support | |
String Support | |
ECMAScript 6 Support | |
RequireJS Object Literal Completion 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!
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 |
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 |
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 |
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. | : |
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. | |
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. |
Tip: Find objects faster from the Outline by understanding what each icon means:
Icon | Type |
Number | |
String | |
Boolean | |
Array | |
Object | |
Prototype | |
Function | |
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:
- Right-click a project, and select Properties.
- In Webclipse, navigate to JavaScript>Performance (or in MyEclipse, navigate to MyEclipse>JavaScript>Performance).
- 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.
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 |
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 |
From Debug Configurations | Select Debug Configurations from the Run menu. Select your project from the JavaScript in Web Application folder and click Debug. |
(select JavaScript in JavaEE Web Application and click OK if the project is not deployed).
.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 |
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.
Opinions expressed by DZone contributors are their own.
Comments