MyEclipse 2017 Stable 1 is our first Stable stream release based on Eclipse Neon; with refreshed software integrations across the product, we bring you a number of new features – Angular and improved TypeScript support, a gorgeous Dark theme, a smarter Terminal, and Gradle integration to name a few. As with all our Stable releases, the features and fixes in this release have been available on the MyEclipse 2017 CI stream, and have been refined over the interim releases. Read on below for the details!
Included in this release:
- Darkest Dark
- Eclipse Neon
- Embedded Tomcat Server
- UI Reorganization
- Gradle Integration
- REST Inspect and Gerrit Workflow Features Removed
- Key Fixes
Our Angular tooling supports development with Angular 2 and the recently released Angular 4 as well, from getting quickly started with a new project, to coding, deployment and debugging, we’ve got you covered.
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.
HTML Template Intelligence
When you’re developing Angular applications, you need an IDE that can support you when you’re developing templates. Our tooling provides Angular 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. Hyperlink navigation allows you to easily navigate to other parts of the template, or even jump from the template to TypeScript source.
Angular CLI Integration
Our tooling is built on top of the Angular CLI, for servicing Angular 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
Deployment & Debugging
To deploy your application for testing, simply bring up the context menu on the project and choose Run As > Angular Web Application. 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.
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.
Upgrading to Angular 4
If you want to upgrade an Angular 2 project 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.
Enhanced Local Terminal
The Terminal+ gives you a bash based local shell, even on Windows! It has in-built support for NPM, Node and Git, along with special smarts when you’re working with the Angular CLI. The terminal is project context aware, so when you switch projects, the view will automatically update its open tabs to match the state you were last in, when working with the selected project. It will also set up your shell environment to the use the versions of Node and NPM specified on the project’s CLI Tool Management property page – even downloading those versions if you don’t already have them. This ensures that you and your teammates can work in the same environment.
We’ve added full support for 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. Needless to say, our TypeScript 2.0 support is also on point, with support for all the newer properties like types, typeRoots, lib, and the different ways in which TypeScript files can be added to your project’s source.
Initial support for TypeScript 2.2 is present as well, with support for TypeScript plugins coming soon.
Our fundamental TypeScript support remains rock solid, with support for as-you-type validation, auto-completion, hyperlink navigation — even to Angular templates, and full, bidirectional support for settings configured in the tsconfig.json file.
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.
Import 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.
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. We’ve also added in a few templates to making coding more efficient.
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. If you’re working with TypeScript 2.2, new quick fixes will become available, like fixes for unused variables, unimplemented abstract methods, etc.
These 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.
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.
We 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.
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 editor’s 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. 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/.
Features like occurrence highlighting, word wrap, block edit and whitespace display can be controlled from the toolbar.
Our new Darkest Dark theme delivers a fully dark UI with icons designed specifically for a dark theme. To use the Darkest Dark theme, simply select it from Preferences>General>Appearance. It’s also 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.
The Darkest Dark theme also works with an array of third-party plugins that you might add to your MyEclipse install. 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!
This release is based on Eclipse Neon 1 (4.6.1), and benefits from new Neon capabilities like improved startup performance, visual enhancements which include a full screen mode and better support for High DPI displays, and editors with word-wrap (Alt+Shift+Y) and the ability to auto-save your files!
As usual with every major, we’ve also refreshed integrations and updated to newer versions of third party tooling on which MyEclipse is built, like m2e, BIRT, Webtools, eGit, STS, etc.
Embedded Tomcat Server
The embedded Tomcat server has been upgraded from version 7.0 to 8.5, finally giving you a server on which you can deploy Java EE 7 web applications out of the box. If your projects were using the 7.0 runtime, our migration wizard will help you move to the 8.5 runtime in 2017.
With 2017, long-time MyEclipse users will notice that MyEclipse provided preference and property pages, along with context menu items, Wizards and Views, are no longer under the “MyEclipse” node / category, as we’ve moved to a more logical grouping of these elements based on their functionality. We’re sure this will give our users a more intuitive experience with MyEclipse going forward.
See this doc for a rundown on the new locations for pages and menu-items that were relocated.
We’ve integrated the Gradle tooling from the Eclipse Buildship project. This gives you the ability to create Gradle projects, an editor for Gradle files, and the ability to execute and monitor Gradle tasks. MyEclipse currently makes no modifications to this tooling, but do let us know how we can enhance your Gradle experience, especially when dealing with Java EE development.
REST Inspect and Gerrit Workflow Features Removed
To make room for awesome new modern web tooling, we have removed REST Inspect and Gerrit tooling from MyEclipse— we don’t want you to feel unnecessary bloat and these features were very light on usage!
- The content assist list will now correctly react to upper / lower case characters keyed in, to continue to show you expected suggestions.
- Linking problems between the Outline and TypeScript source has been fixed, allowing for smooth code navigation.
- Editing the same TypeScript file in multiple editors now works correctly; this also fixes issues experienced when comparing a TypeScript file with prior revisions.
- Miscellaneous errors when hovering over TypeScript source have been resolved.
- When sharing TypeScript snippets with our Slack integration, the right MIME Type is now used.
- JSON in <script> tags could be incorrectly validated with false negatives – this has been fixed.
- Files associated with MyEclipse at the OS level would not open in MyEclipse when double-clicked – this has now been fixed. If MyEclipse is already running, opening the file in an OS explorer will open it in the running instance of MyEclipse.
- Live Preview—The instrumentation required for live preview could insert style rules that pollute the global CSS styling used by your application, affecting how it is displayed – this has been fixed.
- Emmet—Depending on the editor in use, Emmet will correctly use tabs or spaces in its expansion, based on the editor’s preferences.