What’s new in WebStorm

WebStorm 2016.3 improves support for ES6, TypeScript, and Flow and integrates more tools into the IDE, to help you develop more smoothly and productively not only for the web but also for mobile.

Language support

Flow support

Flow support

Using Flow in your project? You can now see type errors reported by Flow, a static type checking system, right in the WebStorm editor as you work with your code, without having to save files. You can also use code completion results provided by Flow.

Better TypeScript

Better TypeScript

TypeScript code analysis and completion are now powered by the TypeScript language service, thanks to which the errors reported in the editor are now consistent with the compiler.
On top of that, WebStorm provides its own powerful refactorings and intentions, including a new smart Rename that understands the inheritance hierarchy.

Migrating to ES6

Migrating to ES6

With a new group of inspections, you can highlight code that can be converted to ECMAScript 6. You can easily convert function to arrow function, var declarations to let and const, require calls to import statements, and strings to template strings by pressing Alt-Enter on a statement or using Inspect code… to apply changes throughout the project.

Convert to class

Convert to class

Start using ECMAScript 6 classes in your code with the new Convert to class intention! Not only can WebStorm convert simple objects with a constructor and some properties to a class, but it can also work with complex prototype chains and create a class hierarchy.

PostCSS support

PostCSS support

With a new official plugin you will get real support for PostCSS with smart code completion, navigation, inspections, configurable code style and auto-formatting, as well as the Rename refactoring for custom selectors and media queries.

Frameworks and libraries

React Native

React Native

WebStorm can now help you develop mobile apps with React Native. In addition to its smart React support, WebStorm now adds an opportunity to create, run and debug apps from the IDE, as well as code completion for React Native StyleSheet properties.

Angular 2 improvements

Angular 2 improvements

Use the New… popup to generate components, directives, services, and other blueprints in projects created with Angular CLI.
Completion and resolve for methods in the templates are now more precise because WebStorm understands available type info.

Tools

Stylelint

Stylelint

Don’t miss any errors in your stylesheets thanks to integration with Stylelint, a CSS linter. In addition to the built-in WebStorm inspections, you can now see the errors reported by Stylelint right in the editor.

Protractor

Protractor

Integration with Protractor, an end-to-end testing framework for Angular apps, now lets you easily run and debug tests in WebStorm and see test results in a tool window, with options to filter them and quickly jump to the test source.

Docker for Node.js apps

Docker for Node.js apps

New integration with Docker allows you to run and debug your Node.js apps in a Docker container from the IDE. WebStorm can also help you quickly bootstrap Docker for your app.

IDE improvements

VCS improvements

VCS improvements

Searching Git and Mercurial logs in WebStorm has become significantly faster and the UI has gotten much clearer. You can now quickly cancel unpushed commits with a new Undo Commit… action, and easily manage remotes in Git via the Configure Remotes dialog.

Other improvements:

  • New modern and sharp-looking file icons
  • Option to create new projects with Create React App from the Welcome screen
  • Fix file with ESLint quick-fix option is now available for the ESLint error in the editor
  • Better support for ES6 destructuring: go to definition, quick documentation, and parameter info
  • Find usages for default-exported functions and classes
  • New code style options for arrow functions
  • Compiled JavaScript files are now excluded in TypeScript projects
  • Yarn can be now used instead of npm
  • Test names are now available via Go to symbol...
  • Option to create an .editorconfig file based on the IDE code style settings
  • Generated files with specific file extensions are now grouped automatically in the Project view
  • Revised UI of file watchers
Learn about WebStorm 2016.2

Language support

TypeScript 2.0 support

TypeScript 2.0 support

WebStorm brings support for many features of TypeScript 2.0: optional class members, readonly property, never type, this function type, global module export declaration, resolve for type declarations in @types folder, path mappings based module resolution, and more. Also, try smarter support for enums.

Convert to arrow function

Convert to arrow function

The IDE takes the next step in helping you upgrade your code to ECMAScript 6. Press Alt+Enter on a callback function, and the new Convert to arrow function intention will convert it to an arrow function (or an arrow function to a shorthand arrow function).

Using let and const

Using let and const

Another new intention allows you to replace var declarations with let or const.
You can also try new .let and .const templates that expand into declarations with let and const keywords once you press Tab.

Frameworks and libraries

Angular CLI and code snippets

Angular CLI and code snippets

Thanks to the integration with Angular CLI, you can now create new Angular 2 projects from the IDE Welcome screen.
And with a collection of Angular 2 Live templates, you’ll have the most used code snippets at your fingertips.

Improved React support

Improved React support

WebStorm can now provide code completion and resolve for component properties defined using propTypes. For React events the IDE will automatically add {} instead of "". Non-DOM attributes are no longer marked as unresolved, and similarly, component lifecycle methods are not marked as unused anymore.

Support for jspm imports

Support for jspm imports

WebStorm now understands jspm imports in JavaScript projects by analyzing the SystemJS path mappings defined in System.config({}).

IDE improvements

Support for fonts with ligatures

Support for fonts with ligatures

The editor in WebStorm now supports fonts with programming ligatures, like Fira Code, Monoid or Hasklig. Make sure you enable that in Preferences | Editor | Colors and Fonts | Font.

Improvements in working with patches

Improvements in working with patches

Working with VCS patches has never been easier. Copy the patch to the clipboard, go to WebStorm – and the IDE will immediately suggest to apply it! Alternatively, just drag the patch file into the IDE, or use the Apply patch action in the VCS menu.

Other improvements:

  • Option to add custom background image with Set Background Image action.
  • Drag images, JavaScript or CSS files into the HTML file in the editor to generate src, script or link tags for them.
  • When using React with TypeScript, components are now automatically imported.
  • Code coverage for Dart, other language injection in string literals, and navigation through the call hierarchy for Dart code.
  • Option to specify any Grunt, gulp or npm task as a Before launch task for a Run/Debug configuration.
  • JavaScript debugging in Firefox 36+ using Firefox Remote debug configuration.
  • Improved UI of the VCS log.
Learn about WebStorm 2016.1

Language support

Better refactoring options

Better refactoring options

WebStorm gets more powerful in performing safe refactoring! Try the improved refactoring options for ECMAScript 6 and TypeScript, for example Create method, Extract method, Inline method, Introduce field, and more.

Unused imports inspection

Unused imports inspection

Any unused import statements in ECMAScript 6 and TypeScript are now highlighted in the editor. And with the new Optimize imports action, WebStorm helps you get rid of any unused imports and merge multiple import statements for symbols from one module.

Better TypeScript support

Better TypeScript support

Enjoy even smarter automatic imports for TypeScript symbols as the IDE carefully adds a required import statement as you type. You can also try the new intentions: Make class abstract, Remove modifier and others. And of course, WebStorm supports the latest TypeScript 1.8 features.

Support for CSS Custom Properties

Support for CSS Custom Properties

WebStorm adds support for CSS Custom Properties so you can get code completion for variable names, jump to the variable definition, see a quick definition and search for usages. WebStorm will also validate the default value for a custom property.

Frameworks and libraries

Improved Angular 2 support

Improved Angular 2 support

Angular 2 support in WebStorm is even more powerful! Enjoy coding assistance for event and property bindings, as well as completion inside any data binding. Code insight and navigation are available for directives, variables defined in templates, custom event handlers, and paths in templateUrl and styleUrls fields.

Further improvements in AngularJS support

Further improvements in AngularJS support

WebStorm brings support for ui-router, letting you jump from the state references to their definitions, and from the named views in the views object to their definitions in the HTML template. In addition, the IDE now understands components defined using the new AngularJS 1.5 module.component() method helper.

Tools

New features in JavaScript debugger

New features in JavaScript debugger

WebStorm’s built-in JavaScript debugger for Chrome now makes lots of new things possible. Debug asynchronous client-side code and arrow functions in ECMAScript 6, and stop on the breakpoints set in Web and Service workers!

Running and debugging Node.js apps remotely

Running and debugging Node.js apps remotely

Now you can run and debug your Node.js applications on a remote server or Vagrant box right from the IDE. Simply configure a remote Node.js interpreter in your Node.js run/debug configuration, place breakpoints in your code, and click Debug.

Vagrant and SSH Console

Vagrant and SSH Console

Integration with Vagrant is now available in WebStorm out-of-the-box. You can run, reload and stop the Vagrant box from the IDE, without using the command line. Using a SSH Console you can connect to your Vagrant box or any other remote machine.

Running and debugging Electron applications

Running and debugging Electron applications

WebStorm now allows you to debug an app’s main process in a built or packaged Electron application, by using Node.js run/debug configuration. You can also debug render process by using Chromium remote debug configuration.

IDE improvements

JSON Schema

JSON Schema

Thanks to support for JSON Schema, a format for describing JSON files, WebStorm can now provide coding assistance for certain types of JSON files. You can add one of the available schemas, or create your own schema and then map it to a specific JSON file in your project. Code completion for tsconfig.json, .eslintrc and .babelrc is now powered by JSON Schema.

Other improvements:

  • New Convert string to template string intention in ECMAScript 6
  • Coding assistance for classes and ids in CSS
  • Support for Dart test package and more generate code options for Dart
  • Support for Git worktree
  • By-word changes highlighting in Merge and Diff Viewer
  • Simplified configuration for debugging client-side JavaScript code built with Webpack
  • Run configurations can now be started while indexing
  • Support for right-to-left languages in the editor
  • Speed search in the Terminal tool window