What’s new in WebStorm

WebStorm 2019.2 brings with it major enhancements in code completion for JavaScript and TypeScript, improved support for Vue.js, syntax highlighting for over 20 languages, new intentions for destructuring, and more.

JavaScript & TypeScript

New UI of completion popup

New UI of completion popup

The completion popup got a new, more polished look.

The presentation of completion suggestions in JavaScript and TypeScript became clearer and more consistent. It’s now easier to spot where the symbol is defined and whether it’s part of a standard language API. There’s also a new icon for symbols with multiple definitions.

Smart new intentions

Smart new intentions

With the new Propagate to destructuring intention (Alt-Enter), you can replace an extra variable if it’s possible with another destructuring. To remove a destructuring completely, use the intention action called Replace destructuring with property or index access.

The IDE will now warn you if a boolean expression in a condition has some unnecessary parts and will suggest simplifying it.

Improved Rename refactoring

Improved Rename refactoring

When you rename a symbol in a JavaScript or TypeScript file, the IDE now groups together dynamic usages and, by default, excludes them from the refactoring. This makes the refactoring more accurate and gives you more control over what exactly should be renamed in the Refactoring Preview tool window.

Vue.js

Better support for Vue.js

Better support for Vue.js component libraries

Using Vuetify, BootstrapVue, or Quasar in your Vue.js application? Code completion for components and their props from these and some other Vue component libraries is now more precise. This was made possible by a new approach we’ve adopted to work with these libraries in the IDE.

Code Editing

Syntax highlighting for 20+ languages

Syntax highlighting for 20+ languages

Need to occasionally look through some PHP or Python files in WebStorm? Syntax highlighting is now available for these and many other languages – with no additional configuration required, thanks to the collection of TextMate grammar files that ships with the IDE.

Completion for mistyped keywords and names

Completion for mistyped keywords and names

Ever typed funtcion or fnction instead of function by mistake? Now, code completion can understand this kind of errors and will still suggest the most relevant option for you. This works in all supported languages and for all symbols – keywords, classes, functions, components, and so on.

Support for shell scripts

Support for shell scripts

WebStorm can now help you work with shell scripts. Code completion works in .sh and .bash files, a new run configuration is available, and the IDE integrates with ShellCheck for linting and shfmt for formatting the code.

Searching for duplicate code

Searching for duplicate code

With the new Duplicate code fragment inspection, you can now find code duplicates in your project. It checks your code on the fly and immediately highlights potential duplicates in the editor. It works for JavaScript, TypeScript, CSS, Sass, SCSS, and Less.

IDE

Code style for a folder with EditorConfig

Code style for a folder with EditorConfig

You can now maintain different code styles in different parts of your projects by adding multiple .editorconfig files. In addition to the standard EditorConfig options, which have been supported for a long time, you can now use IDE-specific properties that cover all available IDE code style options.

Open multiple projects in one window

Open multiple projects in one window

When you have a project opened in WebStorm and want to open another one, you can now attach this second project to the opened one, so that you can see both of them in the same IDE window. If you want to close the attached project, right-click its root in the Project view and select Remove from Project View.

Updated plugin configuration

Updated plugin configuration

With the updated Plugin page in the IDE preferences, it is now easier to find the plugin you need – the plugin description is now shown right next to the list of available plugins. We’ve removed the Updates tab but added a new Update button next to the plugin in the Installed section.

To disable or re-enable all the downloaded plugins, click the gear icon and choose the appropriate option.

Version Control

Completion in .gitignore

Completion in .gitignore

In .gitignore files, the IDE offers code completion suggestions for file and folder names. Cmd/Ctrl-click on the name to jump to this file or folder in the Project view. You can now quickly add a file to .gitignore from the Local Changes tab – right-click it in the Unversioned files group and select Add to .gitignore.

Learn about WebStorm 2019.1

JavaScript & TypeScript

Using JavaScript destructuring

Using JavaScript destructuring

With destructuring, you can unpack values from arrays and objects into variables using a very concise syntax. WebStorm’s new refactorings and intentions (Alt-Enter) can help you easily introduce destructuring to your JavaScript or TypeScript code.

Convert function with Promise to async/await

Convert function with Promise to async/await

You can automatically change a function that returns a Promise with .then() and .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. This is possible not only in TypeScript files, but also in JavaScript and Flow.

Frameworks

Convert function with Promise to async/await

New inspections for Angular apps

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.

Easier navigation in Angular projects

Easier navigation in Angular projects

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.

Improved support for TypeScript in Vue apps

Improved support for TypeScript in Vue apps

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.

Extract Method for React hooks

The Extract Method refactoring now works with local functions and uses destructuring for the return values, making it perfect for extracting custom React hooks.

Improved completion for props

WebStorm now provides better code completion for React props merged using with the spread operator.

HTML and Style Sheets

Updated docs and browser compatibility

Updated documentation

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.

Browser compatibility check for CSS

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.

Camel case support for CSS Modules

If you use CSS Modules in your project, code completion for classes in the JavaScript file will now suggest camel-cased versions of class names with dashes.

Extract CSS variable

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 var(--var-name) syntax.

Testing

Highlighting for failed line in test

Highlighting for failed line in test

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.

Testing with Cucumber and TypeScript

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

Tools

New debugger console

New debugger console

Meet the new, improved interactive debugger console in the JavaScript and 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.group() and console.groupEnd(). You can also filter out any type of log messages.

Completion for npm scripts

Completion for npm scripts

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 npm run, you’ll see a list of tasks defined in the current file.

Improved support for linters

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.

Support for Docker Compose

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.

Version range tooltip for dependencies

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 yarn install.

IDE

New UI themes

New UI themes

You can now use the new colorful UI themes in WebStorm that are available as plugins. Choose between the Dark Purple, Gray, and Cyan Light themes, or create your own.

Recent locations popup

Recent locations popup

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.

Save project as a template

With the new action Save as a Template in the Tools menu, you can now use a project as a base for creating new projects on the IDE Welcome Screen.

Soft-wraps for selected file types

You can now enable soft-wraps in the editor for specific file types. To do that, open Preferences/Settings | Editor | General and specify the file types in the Soft-wrap files field.

Learn about WebStorm 2018.3

JavaScript & TypeScript

Autoimports in JavaScript

Autoimports in JavaScript

In JavaScript files, WebStorm can now automatically add imports not only for symbols defined in your project, but also for symbols from the project’s dependencies. This works as long as the library has sources written as ES modules or a TypeScript type definition file.

Parameter hints

Parameter hints are now available in JavaScript files. They show the names of parameters in methods and functions and make your code easier to read.

Multi-line todos

You can now add multi-line Todo comments: type todo or fixme and then add extra indents on the next lines to continue the todo.

Override method

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

Convert to variable with arrow function

A new intention (Alt-Enter) helps convert a function to a variable that holds an arrow function, or a class method to a field.

Better 'null' and 'undefined' check

WebStorm can now better detect situations when you will get a TypeError because a method is invoked on a value that is undefined or null, or it is passed to a function, or its property is used.

Frameworks

Improved Angular support

Improved Angular support

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.

Node.js APIs

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.

Vuetify support

WebStorm now provides code completion for components from Vuetify version 1.1 or above.

React improvements

In React apps, code completion now suggests all component lifecycle methods. The Unresolved variable inspection will now warn you about the possibly undefined components.

HTML and Style Sheets

Accessibility inspections for HTML

Accessibility inspections for HTML

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.

Rerun failed tests

Move and extract ruleset

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.

New CSS code style options

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.

Remove tags

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.

Testing

Easier navigation for tests

Easier navigation for tests

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

Tools

Debug Node.js worker threads

Support for Node.js worker threads

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.

More flexibility with ESLint and TSLint

More flexibility with ESLint and TSLint

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.

Completion in package.json

For the dependencies in a package.json file, WebStorm now provides suggestions for the latest version, as well as previous ones.

Run Protractor test

Use the editor gutter icon next to a Protractor test to run or debug a single test or suite.

Live Edit

The Live Edit feature now works without the Chrome extension.

Version Control

GitHub PRs

GitHub PRs

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.

Git submodules

All the familiar features in the Git integration, such as update project, commit changes, view diff, and conflict resolution, now work with Git submodules.

Ignore whitespaces

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.

Better support for precommit hooks

The Commit dialog now correctly shows and handles changes made to files with the precommit hook (for example, when you’re using lint-staged).

IDE

New search popup

New search popup

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.

High-contrast theme

High-contrast theme

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.

Plugin configuration

The redesigned Plugins page in Preferences now shows featured and most popular plugins. You can search plugins by categories and sort them by downloads and ratings.

Drag folder to open

Drag a folder with code to the IDE’s Welcome Screen from the file manager or the desktop to open it in WebStorm.