What’s new in WebStorm

WebStorm 2017.2 brings better support for webpack and ESLint, improves testing with Mocha and Karma, and adds new refactoring and new code style options for JavaScript and TypeScript.

JavaScript & TypeScript

Improved webpack support

Improved webpack support

Coding assistance in JavaScript files now respects webpack module resolution. Now when you’re using a complex webpack configuration with aliases and multiple modules, WebStorm will properly resolve paths in import statements and will suggest symbols to import.

Move symbol refactoring

Move symbol refactoring

With the new Move Symbol refactoring, you can now safely move classes, global functions or variables in ES6 modules from one JavaScript or TypeScript file to another. WebStorm will update all the imports and exports for you.

Parameter hints and type info in TypeScript

Parameter hints and type info in TypeScript

Parameter hints show the names of parameters in methods and functions to make your code easier to read.

You can also see the inferred type for objects in TypeScript if you hold Cmd on macOS or Ctrl on Windows & Linux and hover over them.

Code style

Import code style from .eslintrc

Import code style from .eslintrc

You can now import some of the ESLint code style rules to the IDE’s JavaScript code style settings.

Reply 'Yes' when prompted about this in the .eslintrc file, to apply the matched rules and make the IDE formatting more consistent with your ESLint configuration.

Code arrangement

Code arrangement

The new Arrangement and Blank lines code style options allow you to configure how different blocks of code such as fields and methods are ordered and separated in your JavaScript and TypeScript classes.

Call the Rearrange Code action or use it together with Reformat Code to make code more readable and consistent.

Frameworks

Support for Angular Material

Support for Angular Material

Support for Angular Material has gotten better: you can now use code completion and navigation for Material attributes, in addition to completion for components that was available before.

Testing

Run single Karma test

Run single Karma test

You can now run or debug a single test or a suite with Karma right from WebStorm, as opposed to running them all.

Simply click the icon next to the test in the editor and select Run or Debug. The icon will then show the test status.

Code coverage for Mocha

Code coverage for Mocha

Run Mocha tests with coverage and see the coverage reports created by Istanbul right in the IDE.

The report shows how many files are covered with tests and the percentage of covered lines in them. From the report you can jump to the file and see which exact lines were covered and which weren’t.

Stylesheets

Support for CSS Modules

Support for CSS Modules

Using CSS Modules? Now after you’ve imported a CSS Module into the JavaScript file, you will get code completion and navigation to the definition for the class names in that module.

Improved support for Sass and SCSS

Improved support for Sass and SCSS

For Sass and SCSS selectors created using &, you can now use code completion in HTML files and navigate to the definition.

For the nested selector, you can quickly jump to the definition with Cmd-click / Ctrl+click.

Tools

npm install notification

npm install notification

WebStorm helps you keep your project’s dependencies up-to-date. Now when you open a project, update it from the version control or edit package.json, the IDE will prompt you to run `npm install` or `npm update`.

Other improvements:

  • Imports are added automatically on completing JavaScript symbols defined and exported in the project
  • Improved coding assistance for React stateless components and props
  • File nesting settings in the Project view to configure what files are visually grouped
  • Breadcrumbs in JavaScript and TypeScript files
  • New code style options for HTML and JSX: New line before first attribute and New line after last attribute
  • Quick-fix to convert module.exports into ES6 export
  • Improved navigation in TypeScript: Go to definition will prefer .ts files to .d.ts files
  • Create method quick-fix for Angular templates
  • Improvements in Version Control: configuration for the commit message format, the Revert commit action for Git, and the new Reword action for commit messages
Learn about WebStorm 2017.1

Frameworks

Vue.js support

Vue.js support

Vue.js support comes to WebStorm!
Enjoy coding assistance for Vue template language and the language of your choice in the script and style blocks of a .vue file. The IDE automatically completes Vue components and adds required imports for them. And we’re just getting started!

Auto import for React components

Auto import for React components

Select a React component defined in your application in the completion popup – and the IDE will add an import for it automatically.

Forgot to import React? WebStorm will suggest a fix.

Angular language service

Angular language service

To help you even more when working with Angular, WebStorm adds support for the Angular language service, developed by the Angular team to improve code analysis and completion for Angular-TypeScript projects.

Run npm install @angular/language-service --save-dev to enable that in your project.

Testing

Integration with Jest

Integration with Jest

Thanks to the new integration with Jest, you can now run Jest tests from the IDE, see test results in a handy treeview, easily navigate to the test source from there, and also debug Jest tests.

Better testing experience

Better testing experience

When you run tests in WebStorm, you can see whether a test passed or failed right in the editor, thanks to the new test status icons. For Mocha and Jest, click the icon to run or debug a specific test or a suite.

Quickly jump from source to the related test file with the new Go to test action: Shift-Cmd-T on macOS or Ctrl+Shift+T on Windows & Linux.

Code style

New code style options

New code style options

Code style configuration for JavaScript and TypeScript is now a lot more flexible. You can configure the use of semicolons to terminate statements, trailing commas, quotes, and wrappings for ternary operators and variable declarations with a single var.

Support for Standard code style

Support for Standard code style

WebStorm now supports JavaScript Standard Style. Do you use it in your projects? Go to Preferences | Editor | Code style | JavaScript and click Set from Predefined Style – Standard.

You can also use it via the ESLint integration that WebStorm has.

Sorting for imports

Sorting for imports

The imports in JavaScript and TypeScript can now be sorted alphabetically by module or file name when performing Optimize imports. You can also enable sorting of the imported members in the Code Style settings for JavaScript or TypeScript.

Improved TSLint support

Improved TSLint support

Integration with TSLint adds support for TSLint-powered quick-fixes.
You can also import some of the code style rules defined in tslint.json to the IDE code style settings – just reply ‘Yes’ when prompted about this in the tslint.json file.

JavaScript & TypeScript

Module dependency diagram

Module dependency diagram

To overview the application structure, you can now visualize the module dependencies that a file, group of files or folder has. Right-click on a file or directory in the Project view or in the editor, and then select Diagrams – Show diagram.

Tools

Completion for modules in package.json

Completion for modules in package.json

WebStorm now suggests package names in the project’s package.json file, and shows descriptions and latest versions for them.

Completion in webpack configuration file

Completion in webpack configuration file

Migrating to the newly released webpack 2? WebStorm will help you by providing code completion and documentation for options in the webpack.config.js file.

Other improvements:

  • Support for emoji in the editor
  • Updated Find in path dialog with instant preview
  • Support for do-expressions and import() ECMAScript proposals
  • New intentions for arrays: Convert forEach and for..in to for..of
  • Proper formatting for injected languages in template strings
  • Option to mark any branch as a favorite, for easier access
  • Support for debugging Dart VM tests; Drop Frame action and async stacktraces in Dart VM debugger
  • Option to configure Dart SDK path for each individual project
  • New option for JavaScript imports "Use paths relative the project, resource or sources roots"
Learn about WebStorm 2016.3

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 improvements

Angular 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