What’s new in WebStorm
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.
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.
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.
Call the Rearrange Code action or use it together with Reformat Code to make code more readable and consistent.
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.
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.
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.
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.
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`.
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!
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.
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.
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.
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.
You can also use it via the ESLint integration that WebStorm has.
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.
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.
WebStorm now suggests package names in the project’s package.json file, and shows descriptions and latest versions for them.
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.