What’s new in WebStorm
The Extract React component refactoring, new integrations with Angular CLI, better testing workflow and Node.js debugging experience, and many other improvements are available in WebStorm 2018.2.
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.
Meet the new, more compact and lightweight documentation popup!
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.
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.
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.
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.
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.
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.
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.
Node.js debugger now has two console tabs – the Console tab that shows the output of the node
console.log messages, and jump to the location where
console.log was called.
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.
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.
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.
classand on-event handlers with React-specific attributes.
Or if there’s no parent class yet, you can extract fields and methods to a superclass using the new Extract superclass refactoring.
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.
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.
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.
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.
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.
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.
When you open a project, WebStorm will automatically import the supported code style rules from simple ESLint and TSLint configuration files.
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.
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.