JavaScript & TypeScript

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

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

Code completion and parameter info for the standard
JavaScript objects and methods and Web
APIs have 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

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

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

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

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

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

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

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

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

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.

JavaScript & TypeScript

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

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 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

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

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 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

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

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

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

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

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

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 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

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

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

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

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

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

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

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

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

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

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

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.