Three Steps to Awesome JavaScript in Eclipse Neon (4.6)
Have you ever wished Eclipse support for JavaScript compared to Eclipse support for Java? Well, now it does! There are three simple steps you can take to improve JavaScript support for Eclipse Neon (4.6).Step 1: Install Webclipse
Webclipse is a suite of add-ons created to improve the modern Eclipse developer’s experience. You can choose to install only select features or the full suite. And best yet, it’s 100% free to use! Yep, you heard me right. You get unlimited access to Freebie features (like the breadcrumb toolbar and Slack integration) and 8 days worth of Pro features (like JSjet and Live Preview) each and every month. Learn moreStep 2: Code JavaScript with ease
Now that you’ve installed Webclipse, you’re ready to start coding. JSjet brings modern JavaScript to Eclipse Neon. A powerful inference engine allows JSjet to build a more accurate model of JavaScript resources, including ES6. Look at all you get:
- Syntax Highlighting—A broad understanding of JavaScript provides extensive highlighting with unique coloring based on semantics and even includes JavaScript highlighting within HTML files.
- Intelligent Content Assist—If you’ve found the content assist in Eclipse to be unreliable at best, you will be blown away by the advanced content assist JSjet brings to Eclipse Neon.
- Validation—Fast (we’re talking seconds, instead of minutes or even hours) and accurate validation will instantly let you know if something is wrong with your JavaScript code, even large projects!
- Call and Type Hierarchies—Use the Call Hierarchy to view all calls to and from a selected function, method, field or variable. The Type Hierarchy is awesome for viewing classes in ES6.
- Source Refactoring—Finally, there is JavaScript refactoring you can trust with accurate rename refactoring for variables and functions throughout your entire project.
- Source Formatting—Quickly and accurately format either highlighted sections or the entire JavaScript file, including ES6.
- Jump to Declarations—A reliable Open Declaration option is a real time-saver, making it a breeze to jump to the declaration for the current object, whether a method, field, or function.
- Better Visualization of Code—An exceptional Outline view and occurrence highlighting make it simple to visualize and navigate your JavaScript code.
Step 3: Perfect your code with the Debugger and Live Preview
Webclipse not only includes tools to help you write awesome code, it also has tools that help you ensure your code is working as expected. Debug JavaScript, (X)HTML, JSP and Node.js with an integrated debugger that delivers the power and familiarity of the Eclipse Java debugger. You can instantly view changes to your HTML, CSS and JSP within your normal Java EE development workflow—no browser plugins or debug sessions needed! Another big help is Live Preview. You can test changes to HTML and CSS in multiple browsers like Chrome, Firefox, Safari and Edge simultaneously—you can even test mobile devices with an emulator. 
