Please welcome WebStorm 2018.2 EAP #6!
Toolbox App is the easiest way to get EAP builds. You can also get notifications right in the IDE when a new EAP build is available: simply go to Preferences | Appearance & Behavior | System Settings | Updates and select “Automatically check updates for Early Access Program”.
If you’re not yet familiar with our Early Access Programs, or if you want to find out what features were added in WebStorm 2018.2 EAP, check out this page.
Here are some highlights from WebStorm 2018.2 EAP #6 (182.3341.1):
- New Extract React component refactoring
- Improved support for React namespaced components and PropTypes
- Option to configure a global File Watcher available in all projects
- New Rerun failed tests action for Karma, Jest, and Mocha
- Improved support for the Angular CLI’s schematics
- Manage logs on the new Logs tab in the Node.js run/debug configuration
Extract React component
We’re very excited about this feature! WebStorm can now help you create a new React component, by extracting the JSX code from the render method of an existing one.
Select the code you want to extract, and then select Component… from the Refactor this… popup (Ctrl-T on macOS or Ctrl-Alt-Shift-T on Windows and Linux). Name the component and select whether it should be a class component or a functional component.
That’s it! Now your new component is defined next to the existing one and used in it.
You can then use the Move refactoring to move the new component and all the required imports to a separate file. (Do let us know if you’d like this option to be available right on the Extract Component refactoring dialog.)
In this Gist you can see the code before and after the refactoring.
You can modify the code templates WebStorm uses for the new components, by going to Preferences | Editor | File and Code Templates and selecting the Code tab. For example, you can switch from using
PureComponent to using
React.Component when creating a class component. Or, change the template for functional components to using arrow function. You can also change the style of using PropTypes or remove them altogether.
We hope you like this new feature and get a lot of use out of it! Please share your feedback with us in the comments below or on our issue tracker.
Support for React namespaced components