What’s new in WebStorm

WebStorm 2018.1 adds integration with Prettier, partial Git commits, better support for Vue.js and React Native, and completely redesigned documentation.

JavaScript & TypeScript

New documentation UI for JavaScript and TypeScript

New documentation UI

Meet the new, more compact and lightweight documentation popup!

It uses a more clear and consistent format to present the available information about the method’s parameters, their type and their return type in JavaScript and TypeScript. It also renders Markdown used in the JSDoc comments.

TypeScript improvements – Surround with the type guard

TypeScript improvements

In addition to the support for the latest TypeScript 2.7 features, this update improves the Implement Members action and adds the new Surround with type guard quick-fix for unresolved properties.

WebStorm now also recognizes TypeScript configuration files with names other than tsconfig.json.

Rename class and file together

Rename class and file together

Now if you run Refactor – Rename for a class, WebStorm will also suggest renaming the file and its usages if it has the same name as the class.

And if you press Alt-Enter on the name of the class, interface or type, you will see a new intention that suggests renaming the file to this name.

Code Style

Reformat with Prettier

Reformat with Prettier

With the new Reformat with Prettier action (Alt-Shift-Cmd/Ctrl-P), you can format the selected code, a file or a whole directory using Prettier.

Note that Prettier should be installed as your project dependency or globally on your machine.

Frameworks

Create a new Vue project

Create a new Vue project

You can now create new Vue projects in WebStorm using Vue CLI.

Install it by running npm install -g vue-cli, then press Create New Project – Vue.js on the IDE’s Welcome screen, and answer questions about the template and tools that you want to use in your new project.

Extract a Vue component

Extract a Vue component

Create a new Vue component from an existing one, without any copy and paste – select the part of the template and use Refactor – Extract or press Alt-Enter and select Extract Vue Component.

WebStorm will create a new single-file component, add an import for it, and pass all the data and methods to it with props.

Tools

Debugging React Native apps

Debugging React Native apps

With the updated React Native configuration, WebStorm now supports more run and debug scenarios: you can now separately configure how the bundler is started and also attach the debugger to an app that is already built and launched on a device.

Moreover, you can now debug apps that use Expo right in the IDE.

Configuring package manager

Configuring package manager

It has been made easier to configure package managers in WebStorm – in the Node.js and npm preferences, you can select between npm and Yarn and then use it to install dependencies and run scripts.

And if you open a new project with yarn.lock file, WebStorm will use Yarn in it if it’s installed.

New Node.js Debugger Console

New Node.js Debugger Console

Node.js debugger now has two console tabs – the Console tab that shows the output of the node process itself and the new Debugger Console where you can execute JavaScript, see the console.log messages, and jump to the location where console.log was called.

Version Control

Partial commits in Git

Partial commits in Git

With the support for partial Git commits you can now commit only selected changes from the file. Use checkboxes in the diff view of the Commit Changes dialog to select chunks of code you want to commit.

You can also add changed lines of code to a new changelist using actions on the editor gutter and then commit the changelist.

More Git improvements – Abort Rebase, Continue Rebase and Skip Commit

More Git improvements

In the commit details, you can now click on the commit hash to jump to this commit in the Log.

When you’re doing a rebase, there are now new Abort Rebase, Continue Rebase, and Skip Commit actions available in the Git Branches popup.

Style sheets

Completion and go to definition for classes

Completion and go to definition for classes

Cmd/Ctrl-click on the class name in HTML will now suggest navigating not only to its declaration in the compiled CSS file linked in this HTML file, but also to the Sass, SCSS or Less source.

In HTML, code completion will suggest classes and id from all style sheets if there are no matching symbols in the linked CSS file.

Other improvements:

  • If you're migrating to webpack 4, WebStorm can now check and provide completion for option names in the webpack configuration file.
  • Similar to tests, you can now run npm scripts using icons right in the editor.
  • When you copy the HTML code to JSX files, WebStorm will automatically replace class and on-event handlers with React-specific attributes.
  • New inspection in package.json will warn you if an installed version of the package doesn’t match the specified range.
  • Better code completion for SVG properties and values in CSS files.
  • You can now synchronize the IDE settings across multiple machines using your JetBrains account.
  • Support for the ECMAScript proposals: escape sequences in template strings, RegExp lookbehind assertions and named capture groups, and class fields.
  • Improved code completion and go to definition for the dynamic imports with import().
Learn about WebStorm 2017.3

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

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.
Learn about WebStorm 2017.2

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.

Styles heets

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