WebStorm 2018.2 Release Candidate

The Release Candidate for WebStorm 2018.2 is now available.
Please give it a try and share your feedback!

JavaScript & TypeScript

New inspection tooltip

New inspection tooltip

The new inspection tooltip now not only shows the description of an error or warning, but also the best quick fix for it.

Press Alt-Shift-Enter to apply it or press Alt-Enter to see a full list of the available automatic fixes that WebStorm offers there.

Find unused code

Find unused code

With the new Code Coverage feature, you can find any unused code in your client-side app. Start a JavaScript Debug configuration with coverage in WebStorm, interact with your app in Chrome, and then stop the configuration. The report will show you what and how much code was used in each file and folder.

New JavaScript and TypeScript intentions

New intentions

To make you even more productive when working with JavaScript and TypeScript, WebStorm has a bunch of new intentions that are available when you press Alt-Enter. Here are just some of them: Implement interface, Create derived class, Implement members of an interface or abstract class, Generate cases for 'switch', and Iterate with 'for..of'.

TypeScript improvements

TypeScript improvements

WebStorm now supports all the new language features that were added in the latest TypeScript 2.9 and the upcoming TypeScript 3.0 releases.

In addition to that, WebStorm now offers more quick fixes provided by the TypeScript language service itself, like Annotate with type from JSDoc.

Frameworks

Extract React component

Extract and convert React component

Need to refactor your React component into two? Forget copy and paste: select the JSX code in the render method and use Refactor - Extract Component.

And with the new intentions, you can now convert React class components into functional components and back again.

Extract React component

New integrations with Angular CLI

Add features to your app with the New… | Angular Dependency… action. The IDE will use the Angular CLI ng add command which installs the dependency and updates the app with a special installation script.

You can now also generate the code with the Angular schematics defined in libraries like @angular/material using the New… | Angular Schematic… action.

Completion for events in Vue.js

Completion for events in Vue.js

In Vue templates, WebStorm now provides code completion for events. Event names are suggested after v-on: or if you use the shorthand notation @event. There’s also code completion for event modifiers.

Testing

Rerun failed tests

Rerun failed tests

When you run tests with Karma, Jest, or Mocha in WebStorm, you can now rerun only the failed tests, instead of running all the tests after you’ve made a fix.

Rerun failed tests

Diff view for Jest snapshots

If your Jest test has failed because of the mismatch in the snapshot, you can now see why using the familiar IDE side-by-side diff view.

It’s also now possible to quickly jump from the test file to the related snapshot by clicking on the new icon next to the test in the editor.

Tools

Completion for events in Vue.js

Support for Node.js on WSL

You can now use Node.js on Windows Subsystem for Linux to run and debug your Node.js application in WebStorm as well as for all other development tasks in the IDE, like running tests, using linters, and build tools.

Reconnect Node.js debugger

Reconnect Node.js debugger

Thanks to the new Reconnect automatically option in the Attach to Node.js/Chrome debug configuration, it is now easier to debug Node.js apps that use nodemon. When the node process is reloaded after the change, you don’t need to restart the debugger yourself to continue debugging.

Global file watchers

Global file watchers

You can now store the configured File Watchers in the IDE settings and use them in different projects. Before, a File Watcher could only be configured for a specific project. With File Watchers you can automatically run a command-line tool when you change or save a file in the IDE.

Other improvements:

  • New cleaner, simpler icons on the IDE toolbar and tool windows ensure readability and reduce visual clutter.
  • Run and debug your app, commit changes and update the project right from the Touch Bar on MacBook.
  • A new collection of over 50 code snippets for React development.
  • There’s now code completion for properties in the standard React Native components.
  • WebStorm now indexes a new Angular project two times faster, with no compromises affecting the quality of code completion and resolve.
  • You can now add custom templates for postfix completion in the JavaScript and TypeScript files.
  • With the new Drop frame action in the JavaScript and Node.js debuggers, you can re-enter a function if you missed a critical spot you would like to see again.
  • Press Alt-Enter on a line with a breakpoint and see the breakpoint-related actions in the list of intentions.
  • Support for JSON5 is now available in the files with the .json5 extension
  • JSON Schemas files are now automatically downloaded from schemastore.org and applied to your files, based on the file name.
  • You can be logged into multiple GitHub accounts.
  • New Browse Repository at Revision action allows you to explore files in your project at any given revision without a checkout.