WebStorm 2017.3 Release Candidate

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

JavaScript & TypeScript

New Pull Member Up refactoring

New Pull Member Up refactoring

With the new refactoring you can now move class methods up the class hierarchy – from your current JavaScript or TypeScript class to its parent class or interface.

Or if there’s no parent class yet, you can extract fields and methods to a superclass using the new Extract superclass refactoring.

Extract type alias and interface

Extract type alias and interface

The new Extract type alias refactoring for TypeScript allows you to create an alias for a complex type and automatically replace all its usages with the new name. There’s also a new intention to help you convert a type alias into an interface.

You can also create a new interface directly by using the new Extract interface refactoring.

Better code completion and documentation for JavaScript

Better code completion and documentation for JavaScript

Code completion and parameter info for the standard JavaScript objects and methods and Web APIs has improved, as these features are now powered by the TypeScript declaration files.

The documentation available via F1 now also includes a brief description for methods, which either comes from the bundled definition files or is fetched from MDN.

Multiple JavaScript versions in a project

Multiple JavaScript versions in a project

If your project uses different versions of JavaScript and you want WebStorm to complain when the ES6 or JSX syntax is used in the ECMAScript 5.1 file, you can now configure JavaScript language versions per directory in Preferences | Languages & Frameworks | JavaScript.

Frameworks

Improvements in Vue.js support

Improvements in Vue.js support

This update brings lots of improvements to WebStorm’s support for Vue.js! Code completion and navigation to the definition now work for Vue props, properties in the data object, computed properties, and methods.

Closing curly braces are now added automatically in Vue templates.

Code snippets for Vue.js

Code snippets for Vue.js

WebStorm adds a collection of code snippets for Vue. These code templates can help you save time typing some frequently used blocks of code. With a new Vue file template, you can also create new components faster.

Testing

Improved Jest integration

Improved Jest integration

Jest integration has become even better! When running tests in the IDE, you can now use Jest’s own watch mode for faster re-runs.

Run tests with coverage to see the coverage report. Then jump to the file to check what lines of code are not tested, if any.

From the test window, update failing snapshots in just one click.

Tools

Easy start with JavaScript debugger

Easy start with JavaScript debugger

To get started with the JavaScript debugger in WebStorm, now you no longer have to install the JetBrains’ Chrome extension first. Just create a new debug configuration and start it. WebStorm will open a new instance of Chrome and seamlessly attach to it.

New REST Client

New REST Client

WebStorm introduces a new way to test APIs from the IDE. Now you can write HTTP requests in an .http file and then quickly run them with the icons on the editor gutter.

Code Style

Import code style from ESLint and TSLint

Import code style from ESLint and TSLint

When you open a project, WebStorm will automatically import the supported code style rules from simple ESLint and TSLint configuration files.

If, on the other hand, your ESLint configuration file is written in JavaScript or YAML or uses `extends`, you can now import the code style from it using the Apply ESLint code style rules action.

Stylesheets

Better support for CSS

Better support for CSS

Code completion for CSS properties and values has become more precise. It has added completion suggestions for values of transform, transition, and pointer-events properties that were missing before.

Version Control

Working with multiple branches

Working with multiple branches

When you switch between branches, the IDE preserves your workspace, including the opened files, the current run configuration, and the breakpoints. This workspace will be automatically restored when you switch back to that branch.

Other improvements:

  • Imports are added automatically when you copy and paste code from one project file to another.
  • Use an alias for a system's node version instead of a specific version for tools and run configurations.
  • A new intention will now remind you to install a missing type declaration in TypeScript.
  • WebStorm now ships pre-built indices for the definition files for standard JavaScript and Web APIs, which makes projects open faster.
  • Start a Mocha run configuration with the `--watch` option, and it will re-run tests on changes using Mocha’s watch mode.
  • Now you have the option to improve code completion for JavaScript libraries with type declaration files. Press Alt-Enter on the import or require statement, and then select “Install TypeScript definitions for better type information.”
  • Use a different react-scripts version when creating and running a new project with create-react-app in the IDE.
  • Live Edit configuration was updated: to use it for HTML and CSS, enable “Update application in Chrome” in settings, install JetBrains IDE Support Chrome extension, and start a JavaScript debug session.