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 more
- 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.
- 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.
- Jump to Declarations—A reliable Open Declaration option is a real timesaver, making it a breeze to jump to the declaration for the current object, whether a method, field, or function.
Step 3: Perfect your code with the Debugger and Live Preview
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.