WebStorm 2018.2 EAP, 182.3458: integration with ng add, support for TypeScript 3.0, improved support for React Native

WebStorm 2018.2 EAP #7 is now available!

With less than a month left before the official release of WebStorm 2018.2, we are announcing the final features it will include.

Toolbox App is the easiest way to get EAP builds. You can also get notifications right in the IDE when a new EAP build is available: simply go to Preferences | Appearance & Behavior | System Settings | Updates and select “Automatically check updates for Early Access Program”.

Download WebStorm 2018.2 EAP

If you’re not yet familiar with our Early Access Programs, or if you want to find out what features were added in WebStorm 2018.2 EAP, check out this page.

Here are some highlights from WebStorm 2018.2 EAP #7 (182.3458.21):

Adding new features to an Angular app with ng add

The Angular and Angular CLI 6 update introduced lots of new features, including the new ng add command to help add new capabilities to your app. It will install the selected dependency and then invoke the installation script to take care of all the rest.

In WebStorm, you can now use the new Angular Dependency… action to install libraries that support installation with ng add without using the terminal. This action is available via the Find Action (Cmd-Shift-A/Ctrl+Shift+A) popup or the New… popup (Cmd-N/Alt+Insert) in the Project view.

In the list you can select the library you want to add. Right now it contains only the libraries that we know have ng add support, but you can also specify any package name you want. By the way, the list is available on GitHub and you can send us Pull Requests to add more libraries.

In this example, we are adding Angular Material to our project:
webstorm-ng-add

If you add a dependency to package.json that WebStorm knows supports ng add, the IDE will suggest installing it with ng add:

webstorm-install-with-ng-add-inspection

And even if a dependency is already installed, it can still make sense to reinstall it with ng add. To do so, press Alt-Enter on the package name in package.json and select Reinstall with ng add:

webstorm-reinstall-with-ng-add

Run configurations for new Angular projects

If you create a new Angular project using Angular CLI in the IDE, WebStorm now automatically adds run/debug configurations that will help you start and debug the app and run Karma and Protractor tests in the IDE.

angular-cli-project-configurations

Support for the new TypeScript 3.0 features

The next TypeScript release is coming in July and WebStorm already adds support for its new features:

Completion for properties for React Native components

For standard React Native components, WebStorm now provides completion for available props. If the component is not yet imported, press Alt-Enter on the component name to add a missing import.

react-native-props-completion

WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Early Access Preview and tagged . Bookmark the permalink.

6 Responses to WebStorm 2018.2 EAP, 182.3458: integration with ng add, support for TypeScript 3.0, improved support for React Native

  1. Dima says:

    Great job! I Your IDE is the best, just please don’t slow down on TypeScript improvements, they are very much appreciated.

  2. Bud says:

    What about including Database tools in 2018.2? Is it still planned for this release?

    • Ekaterina Prigara says:

      No, sorry, we don’t have any news about that. There’s a chance it will be possible to use the database plugin in WebStorm 2018.2 if you have the App Products or DataGrip subscription, but it still not fully implemented.

  3. Stênio Aníbal says:

    Great job! Webstorm is the best IDE!

    Plans to include debug in emulator (Ionic apps)? In this moment, my alternative is VS Code and, this make me sad. I want to use only Webstorm in my work (to apps).

Leave a Reply

Your email address will not be published. Required fields are marked *