December 6, 2017 at 13:52What's New in WebStorm 2017.3
A major WebStorm update came out last week. We want to talk about what improvements await JavaScript developers in WebStorm 2017.3 and other JetBrains IDEs with JavaScript support.
You can download WebStorm 2017.3 on our website .
In the new version of WebStorm, we have improved support for Vue.js. The template part of the .vue file now has autocompletion and navigation to the definition for props, properties in data objects, computed properties and method names declared in the script part.
The closing brace in the template is now automatically added when printing the opening brace.
We also added a new file template for creating the Vue component and a special collection of Vue code templates (Live Templates) based on the popular template collection .
If you want to move the method of the current class to its parent class or interface, now you can use the new Pull member up refactoring instead of copy-paste. It works for JavaScript and TypeScript classes.
If there is no parent class yet and you want to create it and transfer part of the methods and fields to it, use Extract superclass refactoring .
For TypeScript, we have added a new Extract type alias refactoring , which, as you might guess, creates type alias for the type and replaces all its uses with a new name. Similarly, you can declare a new interface using the Extract interface .
You can also turn type alias into an interface, if possible, using the Convert alias to interface action , available by pressing Alt-Enter.
We also improved Change signature and Extract parameter refactoring - they now use default parameter syntax for optional parameters and generally work better with ECMAScript 2015+ code.
If you copy the code from one JavaScript or TypeScript file in the project and paste it into another file, then all necessary imports will now be added automatically.
The changes affected the very core of JavaScript support. Previously, for auto-completion, information about parameters, and documentation for standard JavaScript objects and methods, we used “under the hood” files we created with definitions. Now we are using TypeScript declaration files.
Thanks to this, documentation appeared, as well as auto-completion for some missing methods. By pressing F1, the method will display the documentation from the .d.ts file or its short description from MDN.
We also added pre-built indexes to WebStorm for these definitions, which accelerated the launch of new projects.
Starting with version 2017.1, WebStorm allows you to apply code formatting rules from ESLint and TSLint configuration files. Now this happens automatically when you open a new project that has tslint.json and a simple .eslintrc file.
If the ESLint configuration is described in YAML or JavaScript or uses extends, then you can import formatting settings using the Apply ESLint code style rules action in the file context menu. Then WebStorm will launch ESLint, give it the configuration for conversion to JSON, and from the received answer will apply the well-known rules that have an analogue in the WebStorm formatting settings.
Now, if you run Jest tests in WebStorm and add --watch in the Jest options field in the configuration , WebStorm will directly use Jest's watch mode to quickly restart the tests. (By the way, for Mocha, we also supported integration with watch mode).
If any of the tests failed due to a mismatch of the snapshot, you can regenerate the snapshot for this test by clicking on the link in the test execution window.
Another innovation is the launch of Jest tests with verification of code coverage by tests ( Run with Coverage) The report, which appears in a separate window in the IDE, shows the percent coverage of the code with tests for directories and files in the project. If you move from a report to a specific file, you will see red and green marks in it on the left, showing whether a particular line of code is covered by tests.
WebStorm 2017.3 introduced a new tool for testing the REST API (in addition to the long-existing client accessible through the Tools menu - Test RESTful Web Services).
Now you can write (with autocompletion!) And execute queries directly in the editor in a file with the .http extension. The answer can be seen in the query launch window, and the logs can be viewed and compared directly in the editor. Read more about the new REST client in this post .
Now, to debug a client-side application in the built-in debugger in WebStorm, you just need to create and run the JavaScript Debug configuration - you no longer need to additionally install extensions for Chrome. WebStorm will launch Chrome in remote debugging mode, which allows a third-party debugger to connect, that is, WebStorm.
If you use the WebStorm Live Edit feature, then you still need the Chrome extension. Live Edit works during debugging and updates HTML and CSS in the browser when changing code in the editor. You can enable Live Edit in Preferences | Build, Execution, Deployment | Debugger | Live Edit - “Update application in Chrome” .
If you have any problems with WebStorm, please report it to our issue tracker .
You can download WebStorm 2017.3 on our website .
Vue.js Support Enhancements
In the new version of WebStorm, we have improved support for Vue.js. The template part of the .vue file now has autocompletion and navigation to the definition for props, properties in data objects, computed properties and method names declared in the script part.
The closing brace in the template is now automatically added when printing the opening brace.
We also added a new file template for creating the Vue component and a special collection of Vue code templates (Live Templates) based on the popular template collection .
JavaScript and TypeScript
New refactoring
Pull member up and Extract superclass
If you want to move the method of the current class to its parent class or interface, now you can use the new Pull member up refactoring instead of copy-paste. It works for JavaScript and TypeScript classes.
If there is no parent class yet and you want to create it and transfer part of the methods and fields to it, use Extract superclass refactoring .
Extract type alias and Extract interface
For TypeScript, we have added a new Extract type alias refactoring , which, as you might guess, creates type alias for the type and replaces all its uses with a new name. Similarly, you can declare a new interface using the Extract interface .
You can also turn type alias into an interface, if possible, using the Convert alias to interface action , available by pressing Alt-Enter.
We also improved Change signature and Extract parameter refactoring - they now use default parameter syntax for optional parameters and generally work better with ECMAScript 2015+ code.
Imports when copying and pasting from a file
If you copy the code from one JavaScript or TypeScript file in the project and paste it into another file, then all necessary imports will now be added automatically.
Documentation and completion for JavaScript APIs
The changes affected the very core of JavaScript support. Previously, for auto-completion, information about parameters, and documentation for standard JavaScript objects and methods, we used “under the hood” files we created with definitions. Now we are using TypeScript declaration files.
Thanks to this, documentation appeared, as well as auto-completion for some missing methods. By pressing F1, the method will display the documentation from the .d.ts file or its short description from MDN.
We also added pre-built indexes to WebStorm for these definitions, which accelerated the launch of new projects.
Integration with ESLint and TSLint
Starting with version 2017.1, WebStorm allows you to apply code formatting rules from ESLint and TSLint configuration files. Now this happens automatically when you open a new project that has tslint.json and a simple .eslintrc file.
If the ESLint configuration is described in YAML or JavaScript or uses extends, then you can import formatting settings using the Apply ESLint code style rules action in the file context menu. Then WebStorm will launch ESLint, give it the configuration for conversion to JSON, and from the received answer will apply the well-known rules that have an analogue in the WebStorm formatting settings.
Testing and debugging
New in integration with Jest
Now, if you run Jest tests in WebStorm and add --watch in the Jest options field in the configuration , WebStorm will directly use Jest's watch mode to quickly restart the tests. (By the way, for Mocha, we also supported integration with watch mode).
If any of the tests failed due to a mismatch of the snapshot, you can regenerate the snapshot for this test by clicking on the link in the test execution window.
Another innovation is the launch of Jest tests with verification of code coverage by tests ( Run with Coverage) The report, which appears in a separate window in the IDE, shows the percent coverage of the code with tests for directories and files in the project. If you move from a report to a specific file, you will see red and green marks in it on the left, showing whether a particular line of code is covered by tests.
New REST client in the editor
WebStorm 2017.3 introduced a new tool for testing the REST API (in addition to the long-existing client accessible through the Tools menu - Test RESTful Web Services).
Now you can write (with autocompletion!) And execute queries directly in the editor in a file with the .http extension. The answer can be seen in the query launch window, and the logs can be viewed and compared directly in the editor. Read more about the new REST client in this post .
Debugging in the browser without additional configuration
Now, to debug a client-side application in the built-in debugger in WebStorm, you just need to create and run the JavaScript Debug configuration - you no longer need to additionally install extensions for Chrome. WebStorm will launch Chrome in remote debugging mode, which allows a third-party debugger to connect, that is, WebStorm.
If you use the WebStorm Live Edit feature, then you still need the Chrome extension. Live Edit works during debugging and updates HTML and CSS in the browser when changing code in the editor. You can enable Live Edit in Preferences | Build, Execution, Deployment | Debugger | Live Edit - “Update application in Chrome” .
Briefly about other improvements in WebStorm 2017.3
- We have improved auto-completion for CSS - it has become more accurate for many properties and their values, in addition, an addition has appeared for the values of the transform, transition and pointer-events properties.
- Now, when switching between branches of the version control system, the IDE remembers which files are open, where breakpoints are located, and what configuration is now selected. When you return to this branch again, this state will be restored.
- In the project settings of Node.js, you can now select a link to the system node instead of the path to a specific version. This is especially useful if you are using nvm. Now, when changing the system version of node, after restarting the IDE, all these configurations and tools using node will continue to use the new system version.
- TypeScript definition files can improve code completion for different libraries in JavaScript files. Now just press Alt-Enter on the library import and select Install TypeScript definitions for better type information so that WebStorm downloads the corresponding declaration file and automatically configures it as a JavaScript Library in the settings.
If you have any problems with WebStorm, please report it to our issue tracker .