Delivery Log for DevStyle (Darkest Dark), Angular IDE and Webclipse

macOS Mojave

From context menus that finally have a dark background, to better looking text fields and cursors, we’ve fixed details that make this theme look awesome if you’re running Mojave. Pictures do speak a thousand words – take a look at these screenshots from across the IDE.

We’d like to mention that you don’t have to use the latest Eclipse version to take advantage of these improvements, even versions as old as Eclipse Neon will look great on Mojave.

Key Fixes

We’ve made a number of key fixes across all OSes:

• Disabled labels on Windows, will no longer look blurry
• On Windows, tree icon alignment was off in HiDPI, on light themes, and newer Eclipse versions (2018.12+) – this has been fixed
• On some Linux distributions, the new startup dialog would be too small to use – this has been fixed
• For those of you who asked, you can use Darkest Dark with the standard Eclipse icon set
• Fixed several obscure coloring issues, especially in the CDT, and color preferences that weren’t retained on restart
• In case you missed it with the last update, the drop-down arrows on the toolbar are now easily visible in dark themes

Angular 6.x Compatibility

• Projects created with the 6.1 CLI could not be launched, this has now been fixed.
• Angular element wizards would fail to generate element source with the CLI, these wizards will now work as expected.
• In Angular 6 projects, CodeLive will now show file names against components.
• An issue where backticks would cause builds to fail has also been fixed.

Deep Black

Last year, we released Darkest Dark for Eclipse – the best dark theme ever to see the light of day. However, some of our users wanted a theme that went truly black, a level of dark that you couldn’t get to, even if you tried customizing our themes.

Well, with this release, we not only allow you to set completely black (and we mean #000) backgrounds, we also created a theme around this – Deep Black. Give it a try and let us know what you think!

Angular & TypeScript

TSLint

Ever been overwhelmed by the number of errors in an imported Angular project, or even a new one, only to find they were actually linting issues? This was especially problem when the TSLint decided that every linting issue was an error by default. We’ve now added a global preference page that will override the TSLint severity, and show rule failures as warnings.

Quick Fix & Imports

When using the quick fix functionality to add an import, the cursor no longer jumps to the location of the added import.

We’ve also fixed a critical bug affecting a small subset of users who were not seeing the quick fix or content assist work for imports.

Miscellaneous Fixes

If you haven’t tried our Open TypeScript Symbol dialog (Ctrl + Shift + T) yet, now’s a great time to start – we’ve made a change that will show symbols from *.d.ts files by default.

Keybindings in the TypeScript editor for actions like Find References, Format, Open Definition, etc. can now be customized on the Keys preference page.

New Dashboard

For users of Angular IDE, we’ve replaced our busy, generic dashboard with something a bit more focused on Angular development. We hope you find this version more useful.

DevStyle

Themes

DevStyle themes are almost infinitely customizable – light or dark, pastel colored icons and your favorite editor theme. You can now share your custom Eclipse look with others using the handy styling shortcode on the theme preference page. Or, just paste in someone else’s shortcode to instantly customize the way your IDE looks. And, for IntelliJ converts, we also have added the IntelliJ IDEA Dark editor theme!

As usual, we’ve improved colors in a few controls, like the Paths and Symbols property page (in the CDT) and the XTend editor. We’ve also fixed a few scroll-bar bugs – it will now appear in a consistent color across editors.

Inline Search

With this release, we’ve removed the “hit Ctrl + F twice to open the regular search dialog” behavior as it was causing a few usage glitches. You can now enable/disable the Inline Search from its new preference page.

Angular & TypeScript

Several fixes have been made in the content assist area – bugs around missing types, case sensitivity, and ordering have been fixed, for a much more reliable and robust assisted coding experience.

The Problems / Markers view would report incorrect line numbers when it came to TypeScript validation, this has been addressed.

In localized code, in some cases, users would experience various failures around our Angular support – this has been fixed.

Bugs around the use of quick-fixes for unused imports have been fixed, stay tuned for further enhancements that make dealing with modules easier in future releases.

If you have TypeScript project, but for some reason do not want support from our tooling, the facet can safely be removed from the project’s Project Facets property page.

DevStyle

Inline Search

Several usability fixes have been made to Inline Search – thanks to continued feedback from our users. The dialog will now automatically close to stay out of your way, the find next/previous actions will use the last searched string from the Inline Search, and we’ll reuse your search area when it makes sense to do so. Please keep your requests and suggestions coming.

Themes

We’ve begun adding a few fixes that are specific to Photon. If you were waiting for DevStyle support, do give it a spin and let us know what you think.

If you enjoy the DevStyle themes, both light and dark, but don’t like the new-style scrollbars, add

-Ddevstyle.enable.themedScrollbar=false 

to your eclipse.ini file (in the -vmargs section) to go back to the native bars.

Angular & TypeScript

Angular 5

Yes, Angular v5 is finally here, and we’ve made sure you’re ready to hit the ground running with this version whenever you choose.

If you select version 1.5.0 of the CLI during project creation, an Angular 5 project will be created, and thanks to our support for Angular 5 language services, you will continue to get the entire range of our Angular support, from content assist and validation, to being able to serve and debug applications with ease.

The Angular 5 release has brought with it dozens of changes, several in the performance space. For example, the build optimer is on by default for production builds, resulting in smaller bundles. The Angular compiler has improved support for incremental compilation, along with an integration of a new version of Webpack, which has performance improvements too. An ahead-of-time (AOT) compiler is also available, though that’s currently not on by default.

Another thing to watch out for is that a number of properties deprecated in version 4 have now been removed, so these will show up as errors in your source. At the same time, new elements introduced in Angular 5 will be listed in your content assist proposals and will be correctly validated. For more details on what’s new with Angular v5, please read this article.

TypeScript 2.5

While Angular v5 doesn’t necessarily need TypeScript 2.5, we’ve added support for this version too. You have access to a few new quick fixes and a compiler which will do a better job with handling multiple resolutions of the same file. For more details, please read this article.

We have also added validation for the tsconfig.json file – invalid configurations will now be detected as errors and will show up in the editor and Problems view.

DevStyle

Thanks to great feedback from our users, we’ve made several improvements to DevStyle, and it is now out of preview! While it was an opt-in feature for CI 8, with 2017 CI 9, it is now enabled for everyone. If you didn’t opt-in to DevStyle in CI 8, read on to learn more.

DevStyle continues down the path we set down with Darkest Dark – it includes an enhanced startup experience, awesome themes, and enhanced functionality within the IDE. If you love the brawn of Eclipse, but are underwhelmed with its beauty and usability, get ready to see it in a completely new light, with DevStyle.

Startup Experience

Tired of seeing the same old “Choose your Workspace” dialog when you fire up Eclipse? Or having a hard time finding the files or a workspace you were working on recently? Use the enhanced startup experience to easily start new projects, jump back into the action in old ones or easily open one of your many workspaces.

Tip: Don’t enjoy the new startup UI? You can turn it off via a simple link at the bottom of the Launch page. You could also go to Window > Preferences > DevStyle and uncheck the “Use the Startup Experience” checkbox.

Quick Start Wizards

Want to get started developing an Angular, or a Node web services application – maybe even a simple HTML Boilerplate based app? Get a jump-start with our wizards, right from the enhanced startup experience.

See this document for more details on the enhanced startup experience.

Themes

Make your workbench a work of art. DevStyle allows you to define a theme that’s uniquely you! What is your idea of the perfect theme? Light and bright? Dark with pops of color? Fine tune your workbench, even down to specific hues and custom icons that speak to you.

If you didn’t catch it already – yes, we now have awesome looking  light themes too!

Tip: Darkest Dark theme settings in the Preference dialog have been moved from General > Appearance > Darkest Dark to DevStyle > Color Themes.

Power Ups

Find the modal search dialog cumbersome? We’ve replaced this with a very capable inline search – we’re sure you’ll find it far more efficient, and unintrusive, it won’t interrupt your workflow.

Tip: Press Ctrl + F twice to bring up the regular search dialog. You can disable the Inline Search on the Window > Preferences > DevStyle preference page.

With the breadcrumb toolbar, you can easily navigate between groups of related resources, great when exploring a large new project, or working with one of your own. View the “crumb trail” that led to the current file and then click any segment in the trail to explore and navigate.

For more on DevStyle, head on over to our documentation, or watch our introductory video.

Key Fixes

Theming / Darkest Dark

Core fixes:

• Dozens of issues around light themes were fixed, from icon and editor colors to rendering issues.
• Our themes will now work fine even with the Oomph activated – there were several problems caused by how Oomph managed preferences affected the functioning of our themes. Similarly, our themes will also work better if you have an installation of Eclipse Color Themes.
• Pressing Ctrl + Shift + M in the PHP editor could cause the IDE to hang on exit, this has been fixed.
• Custom HSL settings will now be respected.
• A rare issue, where an error dialog relating to the user of JNIWrapper would display on exiting the IDE, has been fixed.
• Syntax color preferences changes in the Java editor are respected.
• Exceptions will no longer be logged when opening the JavaDoc view

Rendering fixes:

• HiDPI icons would only correctly work in our dark themes, and were N/A in the light themes.
• Configure contents dialog of the Problems / Markers view will now render correctly.
• The expand / collapse control for Tree controls will now be shown at the right position.

Color corrections:

• Table headers in the Tasks view
• QuickDiff in the EGit history view
• JUnit test coverage in Java classes
• Java Call Hierarchy view
• Comment text in Git Staging view

’

Angular & TypeScript

• Several validation issues around the use of ngFor in Angular Templates have been fixed.
• References to properties via shorthand notation is now no longer marked as an error.
• TypeScript code will now be correctly indented on paste.
• The toggle comments action will now correctly toggle single line comments even if the comment was indented.
• Attempting to use the quick fix functionality to implement an interface would sometimes result in the IDE hanging. This has now been fixed.

’

Terminal+

• Command history functionality has been restored for Terminal+ on macOS.
• Terminal+ will work, no matter what your local shell shell on macOS is. Previously there were failures if you had zsh or ksh for instance.
• Running Node / npm processes could sometimes prevent the IDE from gracefully shutting down. This has now been fixed.

’

Core

• An issue where too many connections were opened in some network environments was fixed.
• On macOS High Sierra, the top level application menu is now enabled and works as expected.
• The Enter key on the number pad can also be used to initiate an inline search.

DevStyle

For years, Eclipse has delivered the same, highly capable platform, albeit with a predictable sameness – a monotone, but reliable, experience. If you love the brawn of Eclipse, but are underwhelmed with its beauty and usability, get ready to see it in a whole new light, with DevStyle. Continuing down the path we set down with Darkest Dark, DevStyle includes an enhanced startup experience, awesome themes, and enhanced functionality within the IDE.

Startup Experience

Tired of seeing the same old “Choose your Workspace” dialog when you fire up Eclipse? Or having a hard time finding the files or a workspace you were working on recently? Use the enhanced startup experience to easily start new projects, jump back into the action in old ones or easily open one of your many workspaces.

Themes

Make your workbench a work of art. DevStyle allows you to define a theme that’s uniquely you! And yes, it’s no longer just our awesome dark theme – what is your idea of the perfect theme? Light and bright? Dark with pops of color? Fine tune your workbench, even down to specific hues and custom icons that speak to you.

Power-ups

Find the modal search dialog cumbersome? We’ve replaced this with a very capable inline search – we’re sure you’ll find it far more efficient, and unintrusive, it won’t interrupt your workflow.

With the breadcrumb toolbar, you can easily navigate between groups of related resources, great when exploring a large new project, or working with one of your own. View the “crumb trail” that led to the current file and then click any segment in the trail to explore and navigate.

For more on DevStyle, do watch our introductory video.

Angular & TypeScript

• Renaming or moving an HTML or CSS file that’s associated with an Angular component will result in references to these files being correctly updated too.
• TypeScript 2.4 is now fully supported.
• The integrated version of TSLint 5 has been updated to 5.6.0; as always, we will only use this version if you aren’t explicitly using another version within your project.

We’ve made several fixes in this area as well:

• Stopping the Angular server will now ensure the Node process is terminated as well. This ensures you won’t have a port blocking problem when restarting the server – this was an issue on Windows.
• On a Mac Pro, or any other systems with multiple ethernet cards, much of our Angular server tooling was defunct, including status monitoring and debugging. This has now been fixed.
• Several bugs around TypeScript refactoring have been fixed.
• Several issues around synchronization of source code with our internal TypeScript and Angular models have been fixed. We’re continuing to make improvements in this area.
• Using an advanced setting on the TypeScript preference page, you can turn off the automatic detection of TypeScript projects.
• Performance issues around editing large TypeScript files have been fixed.
• An empty baseUrl property in tsconfig files is now correctly handled, fixing related validation issues.
• In a TypeScript project, TSLint will now validate js, jsx and tsx files too.

Miscellaneous Fixes

• If your perspective contained multiple Open TypeScript Symbol buttons in the toolbar, please switch to a new Window, using Window > New Window to get a perspective without these buttons. The problem will not recur.
• The quick diff popup, as well as the XSD editor will now appear with appropriate colors when using the Darkest Dark theme.

Eclipse Oxygen

Eclipse 4.7 has only just been released and we’ve updated our tooling to be fully compatible! From fixes in Darkest Dark, to Angular IDE and JSjet, we’re ready for Oxygen – sit back and take a deep breath 🙂

Angular & TypeScript

Typescript 2.3
If you’ve been waiting to try the new features in TypeScript 2.3, like Async Generators, or the new for..await..of statements, this release has you covered. We’ve also added support for new flags like –strict.

Open Type
We’ve added the much awaited Open Type functionality to our tooling, which allows you to easily and quickly navigate to any symbol of interest, across your workspace or in specific projects. Use the toolbar button, or Ctrl + Shift + T, to bring up this dialog and tell us what you think!

Miscellaneous Fixes
A couple of issues around hyperlink navigation, validation, as well as being able to use the quick fix from the Markers view have been fixed.

Darkest Dark

We’ve updated Darkest Dark to take advantage of the new capabilities in Oxygen, notice how the Markers and Problems views now have headers that match the overall look.

We’ve fixed a number of smaller issues with the theme as well:

• Line numbers will now update when scrolling by dragging the editor scrollbar.
• Colors for the Simple Properties Editor have been fixed.
• Installation / uninstallation issues specific to Oxygen have been addressed.
• Jittering rulers/editors in the BIRT Design perspective have been stilled.
• Darkest Dark no longer allows Oomph to override key colors in ABAP.

Angular & TypeScript

CLI Support

We now support the creation of projects with the latest stable and beta CLIs, 1.1.0 and 1.2.0 respectively.

Node and NPM

When creating an Angular project, you can now elect to use pre-installed versions of Node and NPM that you may already have installed on your system. Our project wizards will also allow the selection of more recent versions of NPM (was limited to 3.x earlier), though please note that there appear to be problems with NPM 5.x and Angular.

Refactoring

In CI 5, we added inline refactoring as well as the ability to rename files. In this release, we’re extending rename refactoring to handle folders too, as well as adding the ability to move both files and folders – corresponding imports will be automatically updated, of course.

TSLint 5

There were a number of issues in our TSLint 5 support, we’ve added a number of fixes to this release which should provide robust support for this version of TSLint. Through our new properties page, you can now explicitly choose the version of TSLint used to validate your project.

Miscellaneous Key Fixes

• Odd issues with the auto-insertion of braces, a regression in CI 5, have been fixed. We’re continuing to work on other such typing issues.
• In rare cases, with specific environments, creation/serving Angular projects would fail with various “command not found” errors; this has now been fixed.
• Importing projects which have their tsconfig.json file in the project root now works.
• In projects using Angular 2.x and TypeScript 2.2, the false negative, “Pipe signature not found”, has been fixed.

Darkest Dark

Icon color sets come to Darkest Dark with Simply White and Pastel tones allowing you to decide how toolbars and icons look throughout your IDE. We also are making available over 750 more replacement icons thanks to a huge contribution by bettmaeyer, and efforts by Lukasz and others. Finally, a few more editor themes are bundled!

Evergreen Controls

We’ve heard you, and for those of you who don’t want to get automatic updates to the latest compatibility fixes, you can now turn off evergreen updates via Preferences. To continue to receive updates manually, simply use the Help > Webclipse > Check for Updates… or, Help > Check for Updates… actions.

TypeScript

TSLint 5

Working on cutting edge projects which are already using TSLint 5? We’ve got you covered with support for TSLint 5 – including support for severity levels on linting rules. As always, we respect the version of TSLint you’re using in your project.

Refactoring

Inline refactoring
We’ve always had refactoring for TypeScript variables, fields, methods and functions – but you were required to go through a dialog. Now you can now refactor these elements inline!

Note: If you’re working with TypeScript in Angular projects, these rename actions do not yet ripple into Angular templates, but we’re working on adding this to upcoming releases.

File renames
You can also rename TypeScript files and we’ll take care of correcting imports of this file in other TypeScript source. Again, Angular intelligence is coming soon.

Refactoring preview
Whether you rename TypeScript identifier, or a file, you can now examine the results of refactoring before applying them to your code.

Path Content Assist for Imports

We will provide you with content assist in import statements making it easy to find and import the file or library you need.

Miscellaneous Fixes

A big thank you to users who have been sending in feature requests, diligently reporting issues, and providing test cases and examples, helping us improve our TypeScript support as well as fix several bugs. We will be continuing to focus on fixes in core areas over the coming releases.

The following key issues have been addressed in this release:

• Added smart caret positioning.
• Quick fix added for “new line at end of file”.
• The Pipe (|) in TypeScript 2.2 source will no longer be reported as an error when correctly used.
• TSLint can now load custom rules.
• Several performance issues have been fixed for a smoother coding experience.
• When keying in imports manually, you may have encountered an error logged or displayed – this annoyance has now been fixed.
• Problems with automatic importing of classes from typings definition files have been fixed.

Angular

Angular IDE Installers

If you have had a hard time installing Angular IDE in the past, we now offer executable installers for Windows, macOS, and Linux too. Just download and run, no manual installation steps required!

Simplified Perspective

We’ve toned down the “busyness” of the Angular perspective, for a much cleaner and focused coding experience.

Custom Arguments

We’ve added a feature to provide custom arguments to the Chrome process when launching the Angular application.

Angular 4 Support

Hot on the heels of the Angular 4 release, we’re proud to announce that our Angular 4 support has arrived.

Upgrade Assist
If you want to upgrade to Angular 4, select your Angular 2 project and click on the Upgrade action in our toolbar. Our upgrade wizard will upgrade a whole lot of configuration files, as well as fix some of your code, if necessary. At the end of the process, we’ll give you a set of manual steps that you may need to take to complete the process.

Even outside the automated upgrade process, you can use several new quick fixes to update your TypeScript classes and Angular templates, piecemeal, to Angular 4 standards.

Note: Due to some Eclipse limitations, some of these quick fixes are only currently accessible from the Markers view.

Documentation

Documentation rendering has been vastly improved, we’re capable of handling both JSdoc as well as Markdown based documentation, which will be displayed when you hover over relevant elements. This also applies to documentation that’s shown for content assist proposals.

Inline Templates

Support for inline Angular templates has been improved, we’ve added content assist support, as well as all the documentation updates listed above.

TypeScript 2.2

This version of Webclipse adds initial support for TypeScript 2.2. If you are working with this version of TypeScript, new quick fixes will become available, like fixes for unused variables, unimplemented abstract methods, etc.

We’re continuing to work on our TypeScript 2.2 support, with support for TypeScript plugins coming soon.

Darkest Dark

Now it’s simple to customize your editor colors when using the Darkest Dark theme. Simply go to Preferences>General>Appearance>Darkest Dark and select the editor colors you prefer.

Darkest Dark Theme

Icon Designer

Our wildly popular Darkest Dark theme is only getting better. With the new Icon Designer included in this release you can customize your IDE like never before. While the current Darkest Dark theme is a vast improvement over the old dark theme, with so many plugins out there you are bound to run into an icon that’s less than desirable. No problem! With the Icon Designer you can customize a replacement icon in a snap.  And if you are proud of your work, why not sync with us so that we can consider adding your icon to the Darkest Dark theme for others to enjoy? Learn more about Using the Icon Designer. 

Improvements 

Thanks to overwhelming pickup and some strategic feedback, we’ve made a series of fundamental changes to improve how the Darkest Dark theme works over an array of plugins. When a plugin allows configuration of a color in preferences (Colors and Fonts), the Darkest Dark theme will automatically create an alternate color that looks nice with Darkest Dark. In addition, the theme will now inherit explicit Dark color configurations by plugins so that if a plugin developer takes the time to make dark alternatives for the Eclipse Dark theme, Darkest Dark users will also benefit! And of course, lots of other compatibility fixes like making ABAP’s Quick Assist support work again.

Angular Enhancements

• Angular support has been upgraded to fully support more recent versions of Angular, like version 2.4.x.
• We now support the newer Angular CLI package, @angular/cli. The older, angular-cli package is supported too.
• Validation and content assist have been improved.
• HTML templates can be referenced using ES6 shorthand.
• Hyperlink navigation is now supported in HTML templates, allowing you to easily navigate to other parts of the template, and even other TypeScript files.

Darkest Dark Theme

Our new Darkest Dark Theme finally delivers a fully dark UI to Eclipse with icons designed specifically for a dark theme. If you choose to install this plugin when you install Webclipse, your Eclipse will use the theme automatically; however, it’s simple to change your preference from Preferences>General>Appearance. The Darkest Dark Theme defaults to our own Darkest Dark color theme, but you can use the Eclipse Color Theme to tailor the editor colors or select from a number of other popular themes.

CodeLive for Angular

CodeLive now includes support for Angular. CodeLive can be enabled per project from the Angular CLI Server in the Servers view. With CodeLive you can jump to your source code in the editor directly from the browser. Display the CodeLive Dashboard  to view all active Angular components on the web page. When you hover over a component, an icon displays to the right of the component for each type of corresponding file: TypeScript , HTML template  and CSS . Click the file you wish to view. 

In addition, you can use the Inspector  to view specific components on the web page. Hover over a component on the page to view the component name. Click the component to view the dashboard list filtered for the selected component, and then select the file you wish to view.

TypeScript Enhancements

TypeScript 2.1

We now fully support projects which use TypeScript 2.1 – including new types, constructs, and support for tslib. With configuration inheritance, you can split your configuration across several files, making it much easier to develop against multiple targets.

TypeScript Editor

On-Save actions will now execute automatically when you save a TypeScript file. The actions currently available allow you to automatically format your document, correct whitespace issues and remove unused imports when your file is saved. These actions can be configured globally, as well as at a per-project level.

Editor features like occurrence highlighting, word wrap, block edit and whitespace display can be controlled from the toolbar.

TSLint 4

With this release, we’ve upgraded our TSLint support to support both TSLint 3 and 4. If you have TSLint installed in your project, we will use that version to ensure expected, consistent linting behavior. If you don’t have TSLint installed, we will automatically use TSLint 4.3, giving you access to a number of new linting rules and capabilities.

Of course, users who experienced issues with projects using this version of TSLint will no longer experience any problems.

Improved TypeScript Support

Improved Support for TypeScript Symbols—One of the biggest pain points when working with TypeScript, is having to manually import classes, interfaces, namespaces, functions, … in short, any type of TypeScript symbol into your source file. Well, we have good news for you! Content assist suggestions will include symbol suggestions too, and when selected, not only will we complete the name for you, but we’ll also import it.

Beyond this, we also have quick fix support, so invoking a quick fix on an undefined identifier will result in the symbol being correctly imported into your source.

Content Assist Improvements—If you’ve gotten tired of typing this. for every field/method when coding, just initiate content assist. Not only are the proposals better sorted than before, it will also list fields and methods too (without you having to type this. first), and will insert the this. bit automatically on completion.

Since we write a fair bit of TypeScript internally, we’ve been “dogfooding” these features and our productivity has increased significantly – we’re sure your experience will be similar.

TSLint Integration

TSLint is an extensible linter for TypeScript. While our existing TypeScript validator will already find syntax errors in your code, TSLint checks your code for readability, maintainability, and functionality errors – allowing you to fix them before running into them in production, at runtime.

So, how does our integration work? For Angular projects, a tslint.json is created in your project’s root folder; we use the settings in this configuration file when linting your project. Issues noticed are marked as warnings in the editors ruler area and in the Problems view. This ensures your Angular project conforms to NG best practices.

A key feature is our quick fix support – you can fix the problem automatically, remove the linting rule if you don’t like it, or simply turn off linting for the entire project. The number of quick fixes available right now are limited, but we’re working on adding more to the tooling soon.

TSLint can catch a number of potential problems – from style issues like whitespace and indentation, to functionality issues like duplicate variables, unused expressions or variables used before they are declared. For a more complete list, please see: https://palantir.github.io/tslint/rules/.

We’re also working on adding better support for the tslint.json file, so it’s easy to get to the linting settings you really want for your team.

Angular 2 Quickstart

A key capability of our Angular support, especially for beginners, is that there are virtually no prerequisites — we’ll download everything from Node to the Angular CLI for you, automatically. So if you were concerned about getting your environment set up right and downloading dependencies in advance, don’t bother! While our wizards will suggest recommended defaults, you are free to choose other versions of Node, NPM, or the Angular CLI. You can start with a basic project or a template based on the popular SB Admin theme.

TypeScript 2.0

With this release, we fully support TypeScript 2.0, along with all the newer properties like types, typeRoots, lib, and the different ways in which TypeScript files can be added to your project’s source. We’ve also added in a few templates to making coding more efficient.

Our fundamental TypeScript support remains rock solid, with support for as-you-type validation, auto-completion, hyper-link navigation — even to Angular 2 templates, and full, bi-directional support for settings configured in the tsconfig.json file.

Angular 2 HTML Template Intelligence

When you’re developing Angular 2 applications, you need an IDE that can support you when you’re developing templates. Our tooling provides Angular 2 validation, so that you’ll know if you’ve mistyped an Angular element or attribute, or called a non-existent method. Our auto-complete support will provide suggestions for Angular tags, attributes and even expressions. Within expressions, we support the Angular Template syntax, so expect to see content assist for variables, methods, fields, functions, etc., from your referenced components.

Angular CLI Integration

Our tooling is built on top of the Angular CLI, for servicing Angular 2 applications, and includes best-practices compliant generation of services, components and more. An enhanced terminal ensures paths and environment are ready for rapid development.

• Seamless launching of ng serve from the IDE
• Display of server build problems alongside the code
• Automatic detection of external ng serve invocations
• Generate services and components from wizards

Angular 2 Deployment & Debugging

To deploy your application for testing, simply bring up the context menu on the project and choose Run As > Server for Angular CLI Project. Alternatively, you can open the Servers view and find your project under the Angular CLI node, from where you can easily start and stop deployment, or even start a debugging session. Not only is your application being served for local testing in a browser, a LiveReload server is also started. With LiveReload, any time you change a source file and save it, the application is rebuilt, the deployment is updated and the browser page, if you have it opened, is automatically refreshed as well.

To debug, you can use the Servers view or the Debug As > Server for Angular CLI Project context menu item. You can place breakpoints in HTML, JavaScript and TypeScript files too — our debugger will allow you to step through the original TypeScript source during a live debugging session.

TypeScript Fixes & Enhancements

• TypeScript source scopes are now dynamically handled according to rules used by TypeScript compiler. This results in correct validation of imports and types, and accurate content assist based on the “files”/”excludes” properties in tsconfig.json.
• Large performance improvements in all areas of the tooling – faster editor startup, source validation, file compilation, and lower memory usage.
• A bug where referenced non-TypeScript projects could cause TypeScript functionality to break has been fixed.

TypeScript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript—if you love JavaScript but have a hard time dealing with its loosely typed nature, TypeScript is the answer!

TypeScript support in Webclipse includes a TypeScript editor, along with robust content assist, validation and code navigation capabilities. TypeScript code is intelligently transpiled to JavaScript when necessary, and all features are customizable, from validation to syntax coloring in the editor.

For those of you already using TypeScript, you’ll be happy to know that our support is centered around the tsconfig.json file—our TypeScript tooling will load and store values to this file, so that it will respect settings you may already have, without needing to configure them again in the IDE. Conversely, changes you make in Webclipse will be accessible on the command line and in other environments as well.

For more details on our TypeScript support, please read this document.

DevSearch

Tired of jumping to an external browser each time you run into a problem? Use the new DevSearch view for a less disruptive search experience.

Key in your query into the view, or use the context menu action to run queries directly from other views and editors. DevSearch will search the Eclipse help system, StackOverflow and GitHub in the background, and bring up results in the view when available.

CodeLive's Magic Wand

Lose your way in a project with dozens or hundreds of HTML files? Enable the Magic Wand in the CodeLive dashboard and it will show you the path to the source file in your Eclipse workspace! It gets better – “Want to go to there”? Just click that element to open the source file in Eclipse with the source corresponding to that element selected.

JSJet - Linting and Validation

Interested in achieving high levels of JavaScript code quality? If so, using a JavaScript linter is essential, and you may already be using one. While we did support Linters with the first release of JSjet, this release makes the feature more robust, accessible and easier to use.

Choose from linters like JSHint, ESLint or JSCS – use the default linting settings, customize them within the IDE or use an external configuration file; JSjet is smart at picking those up automatically too.

We’ve also added the ability to customize JavaScript validation with a few validation settings.

Live Preview with CodeLive

This release of Webclipse introduces CodeLive. Live Preview is the first feature included in CodeLive, with additional features coming in future releases.

To use Live Preview, you will now need to turn on CodeLive per server, and then select the files you want to use CodeLive. The first time you view you web project in a browser, you can select the files that will utilize CodeLive. This change in Live Preview optimizes performance by injecting only the necessary files.   More Information

Bootstrap your app development with Templates

If you ever wanted to quickly get started with a great looking UI for your web application, but didn’t know how to get started – we can now help with our new template support!

Select a template from the Template tab in the dashboard and simply follow the wizard to get a Java EE application, bootstrapped with the chosen template. You can then easily customize the template as per your requirements.

While the current set of templates are based on the Bootstrap framework and produce Java EE applications, as we add support for additional web frameworks and project types to Webclipse, we’ll be expanding our template support accordingly. Beyond Bootstrap, we could have Angular or React templates (for example) and in addition to Java EE projects, we could support Node.js, PHP, Static Web projects, etc.

Do give our template support a spin and tell us what you think!

All-round JSjet improvements for better JavaScript support

This release brings with it a host of fixes and improvements to our JavaScript support with JSjet.

• JavaScript search now works –  detailed searches for methods, fields, types, etc., are possible. You can also limit the results to read / write accesses, or declarations only, for instance.
• You can now format just selected blocks of JavaScript code as opposed to only being able to format the entire file.
• Several fixes have been made to the code Outline and Quick Outline views. The Outline view will follow you as you code and it is now easier to navigate with the Quick Outline.
• Fixes in the Call Hierarchy view to better handle some advanced JavaScript code were made.
• JSDebugger – Source maps will now work when debugging a Node.js 6.x application.

JSjet - Outline Improvements

For some JavaScript structures, the Outline view would be blank – this could happen in some AngularJS configurations as well. This has now been fixed and the outline will show you key methods which you can easily use for navigation too.

Additional intelligence in the outline view also allows it to go deeper into the JavaScript models to better visualize more complex structures that might exist in JavaScript frameworks like jQuery for instance.

JSjet

Syntax Highlighting

Tired of how dull a rich, dynamic language like JavaScript looks in Eclipse? JSjet significantly improves the syntax highlighting in JavaScript code, vastly improving readability.

Content Assist

A powerful inference engine allows JSjet to build a more accurate model of JavaScript resources, resulting in a more exhaustive and accurate list of content proposals. Plus, you can get better content assistance along with documentation for a number of JavaScript technologies that you have the option to enable.

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.

ES6 Support

JSjet is ECMAScript 6 aware, so all JavaScript features, ranging from fundamentals like syntax highlighting and code folding, to features like the call/type hierarchies, and the formatter work correctly, even when dealing with ES6 code.

Besides these, JSjet includes a faster and more accurate validator, a more complete and detailed outline, better occurrences highlighting and navigation, and a source formatter that doesn’t balk at ES6 code. A few JavaScript linters like JSHint and ESLint are available too! For more details, please see this page.

JSjet thanks Eclipse for providing a superb IDE to build on top of. In addition, a special shout out to Angelo Zerr and the Tern community for some awesome building blocks.

Slack for Eclipse

Slack for Eclipse is now using the OAuth flow and no longer requires you to get a token from Slack before using the feature. Now you simply need to give Slack for Eclipse permission to access your Slack account. You are prompted for authorization the first time you share code with Slack or you can give permission at any time from Windows>Preferences>Webclipse>Slack for Eclipse. All you have to do is click Add to Slack and you are ready to start sharing code with your teammates!

The following commands are now available in Slack when you use Slack for Eclipse:
/code-open filename [lines] [locator-id]—Open files in Eclipse directly from Slack (e.g., /code-open MyClass.java 5-10 5zO+3Q)
/code-invite—Tell others on the current channel about using Slack for Eclipse

Live Preview

The Live Preview technology has been fundamentally improved, resulting in significantly faster deployment times when enabled. In CI 1, some deployments would take too long to complete when Live Preview was enabled, this has now been fixed.
We now also support live editing of files over HTTPS.

Remote Node Debugging

Have an externally deployed Node application that you would like to debug? Use the new Node.js/V8 connector under the Remote JavaScript debug configuration to debug against this instance. If you have the same files that are being deployed to Node.js in your workspace, the debugger will automatically pick up these files as source.

Live Preview

You can instantly view changes to your HTML and CSS within your normal Java EE development workflow—no browser plugin or active debug session required.  Plus, you can view these changes in multiple browsers and simulated mobile devices simultaneously. Maybe you use JSP to create dynamic web content. With the first release of Live Preview, JSP support is included as an experimental preview feature and limited to static blocks. Further enhancements will be included in future CI releases.

JavaScript Debugging: Source Maps

The JavaScript debugger now supports source maps, so you can step through and debug against your original source during a debug session, even though, at runtime, your application is using transpiled or minified source, or source that is modified in some other way. For instance, you can now place breakpoints and step through .ts (TypeScript) or .coffee (CoffeeScript) files too!

Source map support is automatic and does not need to be explicitly enabled. Our JavaScript debugger loads the maps in your runtime scripts and uses them to reference the original source from your workspace if possible; if not, you can still debug against the uncompressed source that is present in the map itself.

For the best experience with source maps, please ensure that you build your project with the right source map related flags. For more details, please read this doc.

JavaScript Debugging: Hot-Swap

Need to modify your JavaScript in the middle of debugging session? No problem – once you modify and save your changes, the JavaScript debugger picks up these changes and you can continue debugging against the modified code, without needing to restart the debugging session. Hot-swap is only available for Web Application debugging where it is turned on by default. It is not currently available for Node debug sessions.

Miscellaneous Key Fixes

• Markers were not being correctly updated on the Breadcrumb Toolbar as they changed in your workspace, this has been fixed.
• Missing Webclipse features? The Dashboard will now allow you to easily install features you may have missed.

Emmet Support

Do you find yourself working with a lot of HTML? Maybe CSS or XML? It can often be tiresome to type in loads of markup or simply make the edits you need easily and quickly, especially when dealing with a large amount of content. This is where Emmet comes in!

Unlike regular snippet functionality, with Emmet you can type CSS-like expressions which are dynamically parsed and then expanded immediately into well formed markup, saving you loads of typing.

For example, in an HTML file, if you type: nav>ul>li and press Ctrl + Alt + Enter, you will get

<nav>
   <ul>
     <li>
     </li>
   </ul>
</nav>

A more complicated example, ul>li.item$*5 will result in

<ul>
   <li class="item1"></li>
   <li class="item2"></li>
   <li class="item3"></li>
   <li class="item4"></li>
   <li class="item5"></li>
</ul>

Now, a couple of CSS examples:

bd:n expands to border: none;

ff:v expands to font-family: Verdana, Geneva, sans-serif;

Emmet works in (X)HTML, CSS, XML, XSL and JSP files. It will even give you CSS specific expansions in the CSS sections in HTML files or HTML support at appropriate locations in JSP files.

There are literally hundreds of additional abbreviations – in any supported editor, bring up the context menu in a supported file and choose Emmet>Emmet Cheat Sheet for a list. Also, there are dozens of useful keyboard shortcuts and everything is customizable, of course. If you don’t like Ctrl + Alt + Enter, you could switch to any other key combination (perhaps the Tab key?) by editing the key bindings in Window>Preferences>General Keys. Beyond code expansion, Emmet also helps with code navigation and selections too.

See the MyEclipse HTML Editor doc for a quick demo.

A big hat tip to Sergey Chikuyonok for his fantastic work on both Emmet and Emmet-Eclipse. For tech folk out there, the version of Emmet we’re using internally is 1.3.

Breadcrumb Navigation

The Breadcrumb toolbar allows you to quickly navigate through your workspace and open files for editing. The crumb trail that led to the current file in the source editor displays in the Breadcrumb toolbar. Click on any crumb in the trail to navigate to a different resource in your project.

Early Adopter Period Comes to a Close

As a new introduction to the Genuitec family, we were happy to offer the initial release of Webclipse completely free to members of our Early Adopter program. We appreciate all of the positive feedback and suggestions. As that period draws to a close, we are introducing an innovative pricing plan. Many cool features remain free. And, our advanced features remain free for casual users. For those power users out there, we have introduced new affordable plans that come with unlimited use of all features along with additional perks. Learn more

JavaScript Debug Hover Improvements

Hover behavior during JavaScript debugging has been improved – the hover will now evaluate expressions, and the object being examined will also be highlighted in the source editor.

Slack Integration

Webclipse now integrates with Slack.  Simply register a Slack token and then you are ready to send and receive code snippets. You can even view shared code directly in Eclipse without needing to access Slack to view the code.

Gerrit Workflow

If you use Gerrit for code review and repository management for Git, you’ll be excited to see the process streamlined with our Gerrit Workflow. Now, it’s a breeze to instantly fetch changes and switch between multiple feature and stable branches. Plus, you’ll ensure a high quality of code and test against regressions before submitting code to stable branches.

JavaScript Debugging - Externally Deployed Debugging Support

If you ever wanted to debug an application that has already been deployed, or step through some code in a website online, the new externally deployed debugging support now allows this. JavaScript debugging is no longer limited to Java EE applications.

If you have source in your workspace you’d like to debug against, simply bring up the context menu on an HTML file and choose Debug As > JavaScript in Externally Deployed Web Application.

If you want to debug a website, simply create a new JavaScript debugging launch configuration with Externally Deployed as the type.

In addition, we now have better handling for sites with invalid SSL certificates.

REST Explorer Displays MIME Types

The REST Explorer now indicates both input and output MIME types for your endpoints within the view itself; you no longer need to browse the source to figure this out. Also, the REST Explorer can now handle multiple JAX-RS methods at the same resource path, this condition is no longer interpreted as an error.

Additional REST Inspect Fixes

• When you select an endpoint and click Open in REST Inspect, that endpoint is made visible in the endpoints section of REST Inspect.
• In Windows, the REST Inspect window gains focus when brought to the foreground.