What’s new in WebStorm
You can automatically change a function that returns a Promise with
.catch() calls to an async function that uses the async/await syntax. Simply
press Alt-Enter on the name of the function and select Convert to async function.
For Angular applications, WebStorm adds 17 new inspections that will help you detect Angular-specific errors in your app as you type, and will suggest quick-fixes. These inspections work both in the TypeScript and template files and check the use of bindings, directives, components, and many other things.
In Angular apps, you can now use the Related Symbol… popup (Ctrl-Cmd-Up / Ctrl+Alt+Home) to quickly jump between the different component files such as TypeScript, template, style, and test files. In the TypeScript file, the popup will also list all the symbols that were imported into this file.
WebStorm now uses the TypeScript language service together with its own TypeScript support for any TypeScript code in .vue files. This means that you’ll now get more accurate type checking and type info, you will be able to use the quick-fixes provided by the service, and see all the TypeScript errors in the current file in the TypeScript tool window.
The Extract Method refactoring now works with local functions and uses destructuring for the return values, making it perfect for extracting custom React hooks.
WebStorm now provides better code completion for React props merged using with the spread operator.
The documentation (F1) for CSS properties and HTML tags and attributes now shows up-to-date descriptions and information about the browser support from MDN as well as links to the full MDN articles.
To check that all the CSS properties you use are supported in the target browser version, you can enable a new Browser compatibility inspection in preferences.
With the new Extract CSS variable refactoring, you can replace all the usages of a value in a current
.css file with a variable by using the
When you run tests with Jest, Karma, Mocha, or Protractor and some tests fail, you can now see right in the editor where the problem happened. The IDE will use the information from the stack trace and highlight the failed code. On hover, you’ll see the error message from the test runner and you can immediately start debugging the test.
Using Cucumber and TypeScript? You can now jump from the steps in the .feature file to their definitions in the .ts file, and generate missing definitions using a quick-fix (Alt-Enter).
Node.js debug tool windows! It now displays objects using a tree view, and it supports
styling of log messages with CSS and grouping them using
console.groupEnd(). You can also filter out
any type of log messages.
When adding new scripts to the package.json file, WebStorm now provides suggestions
for available commands provided by the installed packages. After typing
node, the IDE will suggest folder and file names. And after typing
run, you’ll see a list of tasks defined in the current file.
WebStorm can now run multiple processes for ESLint and TSLint in one project to make sure that they work correctly in monorepo-projects and in projects with several linter configurations.
If you use Docker for testing your Node.js application, you can now use the configuration described in the Docker Compose file to easily run and debug the app from the IDE.
In package.json, press Cmd/Ctrl and hover over the version on a dependency to see what
range of versions can be installed when running
npm install or
The Recent Locations popup (Cmd-Shift-E / Ctrl+Shift+E) is a new way to navigate around the project. It shows a list of all the files and lines of code in them that you have recently opened in the editor. You can start typing to filter the results and jump to the code you need.
You can now add multi-line Todo comments: type
fixme and then add extra indents on
the next lines to continue the todo.
When you override a method from the parent class or interface and select it from the completion
suggestions, the IDE automatically adds parameters,
super() call, and the type
A new intention (Alt-Enter) helps convert a function to a variable that holds an arrow function, or a class method to a field.
WebStorm can now better detect situations when you will get a TypeError because a method is invoked on a value that is
null, or it is passed to a function, or its property is used.
WebStorm is now much better at helping you edit Angular templates. Сode completion and Go to definition for variables, pipes and async pipes, as well as for the template reference variables are now much more accurate. In total, over 50 known issues have been fixed in Angular and AngularJS support.
Parameter info and documentation for Node.js APIs are now more detailed because they use data from node.d.ts. Go to definition will still take you to the Node.js sources if you want to see the actual implementation of the methods.
WebStorm now provides code completion for components from Vuetify version 1.1 or above.
In React apps, code completion now suggests all component lifecycle methods. The Unresolved variable inspection will now warn you about the possibly undefined components.
To help you to write more accessible HTML code, WebStorm adds new inspections that are based on recommendations from the Web Content Accessibility Guidelines (WCAG). These inspections cover about a dozen techniques, and suggest helpful quick-fixes when you press Alt-Enter.
With the new Extract ruleset action, available when you press Alt-Enter, you can quickly extract CSS declarations from one ruleset to a new, more specific one.
And the Move refactoring helps you move the whole ruleset from one CSS, SCSS, Sass, Less, or Stylus file to another.
The code style for CSS, SCSS, Sass, Less, and Stylus now has a configuration for the use of blank lines. Moreover, you can now sort the CSS properties inside blocks – alphabetically or in some custom order.
The Unwrap/Remove action for HTML and JSX tags (available via Alt-Enter or Shift-Cmd-Backspace / Ctrl-Shift-Delete) now automatically updates the indents.
The Structure view now shows the names of tests and suites in the file. Start typing the test name to filter the list, and quickly jump to the one you need in the file.
For failed tests, double-click the test name (or Jump to Source) in the test tool window to go to the failure line (if it’s specified in the stack trace).
WebStorm now provides code completion for the
worker threads’ API and allows you to debug workers – use Node.js 10.12 or above and the
--experimental-worker flag. You will know in what thread the breakpoint is hit. You can also
switch between threads to see the call stack and variables.
WebStorm uses severity levels from the linter’s configuration file, both in the editor and when inspecting the code before the commit. Now, you can override these severity levels in the IDE and see all problems from the linter as errors or warnings.
For TSLint errors, press Alt-Enter and then the right arrow key to add a comment to suppress the rule.
For the dependencies in a package.json file, WebStorm now provides suggestions for the latest version, as well as previous ones.
Use the editor gutter icon next to a Protractor test to run or debug a single test or suite.
The Live Edit feature now works without the Chrome extension.
You can now see all Pull Requests in your project on GitHub right in WebStorm. In the menu VCS - Git, select View Pull Requests to open a new tool window that shows the PR’s description, assignee, labels, and, of course, the changed files. From there, see the diff or create a new local branch.
All the familiar features in the Git integration, such as update project, commit changes, view diff, and conflict resolution, now work with Git submodules.
You can now ignore or trim whitespaces while merging – the configuration is available in the new drop-down on top of the Merge Revisions for… dialog. Whitespaces are also ignored by default when you use Annotate for a file.
The Commit dialog now correctly shows and handles changes made to files with the precommit hook (for example, when you’re using lint-staged).
The unified search popup makes it easier to search for classes, symbols, and files in the project. You can even use it to search for IDE settings and actions! Start with Search Everywhere (Shift-Shift) or any Go to action, and then press Tab to switch the search context.
To make WebStorm more accessible to everyone, we’ve added a new high-contrast UI theme.
The IDE now allows line numbers, VCS annotations, breakpoints, and other gutter icons to be read by a screen reader. Learn more about screen reader support in the documentation.
The new inspection tooltip now not only shows the description of an error or warning, but also the best quick fix for it.
Press Alt-Shift-Enter to apply it or press Alt-Enter to see a full list of the available automatic fixes that WebStorm offers there.
WebStorm now supports all the new language features that were added in the latest TypeScript 2.9 and the upcoming TypeScript 3.0 releases.
In addition to that, WebStorm now offers more quick fixes provided by the TypeScript language service itself, like Annotate with type from JSDoc.
Need to refactor your React component into two? Forget copy and paste: select the JSX code in
render method and use Refactor - Extract Component.
And with the new intentions, you can now convert React class components into functional components and back again.
Add features to your app with the New… | Angular Dependency… action.
The IDE will use the Angular CLI
ng add command which
installs the dependency and updates the app with a special installation script.
You can now also generate the code with the Angular schematics defined in libraries like
@angular/material using the New… | Angular Schematic… action.
In Vue templates, WebStorm now provides code completion for events. Event names are suggested
v-on: or if you use the shorthand notation
@event. There’s also code completion for event
When you run tests with Karma, Jest, or Mocha in WebStorm, you can now rerun only the failed tests, instead of running all the tests after you’ve made a fix.
If your Jest test has failed because of the mismatch in the snapshot, you can now see why using the familiar IDE side-by-side diff view.
It’s also now possible to quickly jump from the test file to the related snapshot by clicking on the new icon next to the test in the editor.
You can now use Node.js on Windows Subsystem for Linux to run and debug your Node.js application in WebStorm as well as for all other development tasks in the IDE, like running tests, using linters, and build tools.
Thanks to the new Reconnect automatically option in the Attach to Node.js/Chrome debug configuration, it is now easier to debug Node.js apps that use nodemon. When the node process is reloaded after the change, you don’t need to restart the debugger yourself to continue debugging.
You can now store the configured File Watchers in the IDE settings and use them in different projects. Before, a File Watcher could only be configured for a specific project. With File Watchers you can automatically run a command-line tool when you change or save a file in the IDE.