WebStorm 2018.1 EAP, 181.3263.21: improvements for React Native, extract Vue component

The new WebStorm 2018.1 Early Preview build (181.3263.21) is now available!

You can update via Toolbox App, or download the build here and install it beside your stable WebStorm version.

Download WebStorm 2018.1 EAP

To learn more about all the new features added in earlier WebStorm 2018.1 EAP builds, please check out these blog posts.

Extract Vue component

With this new intention you can now easily, without any copy and paste, extract a new Vue component from an existing one.

Select the part of the template you want to extract, press Alt-Enter and select Extract Vue
Component
. Then type the name of the new component. WebStorm will create a new single-file component (or warn you if the name you’ve selected is already used or invalid) and import it into the parent component.

All the data and methods used in the extracted template will stay in the parent component and will be passed to a new component with props. The related styles will also be copied.

Running and debugging React Native apps

In the React Native development, we now support several new run and debug scenarios, including debugging with Expo. For that, we had to rework the React Native run/debug configuration significantly.

We would really appreciate your feedback on these changes in the comments: have you managed to successfully set up the configuration? Did it fit into your workflow? Were you able to set up debugging with Expo? Would you prefer to have a separate run configuration for the bundler?

debug-react-native-app-in-simulator

To start your React Native app for the first time, you need to do two things: run React Native bundler/packager and then build and launch an app on a simulator or a device using the react-native run-ios or run-android command. Only after that, you can start debugging it.

However, if you haven’t made any changes to the native code in your application since the last build and the bundler is already running, you don’t really need to rebuild it – you can just open the app in the simulator and then debug.

Therefore, in the updated React Native configuration, you can now select whether to build and open the app in the simulator as part of the run or debug or not – for that there’s now a Build and Launch Application checkbox.

debug-react-native-app

So if it’s unchecked and you start debugging this configuration, WebStorm will run React Native bundler and will wait for you to open an app in the simulator with the Remote debug enabled in the app.

There’s also now more flexibility with running React Native bundler. It’s now listed as a Before Launch task in the React Native configuration. By default, it will run react-native start. You can also select an npm task from your project’s package.json that will start the bundler.

configure-react-native-bundler

Or if you have bundler already running, you can simply remove this step from the configuration (because you don’t need to run more than one bundler per app).

Update on using node for debugging

Another update is that we have deprecated using Node.js as a backend for React Native debug process. We now rely on Chrome for debugging, which is used by React Native itself. The main reason for this decision was that node implementation was difficult to maintain for different react-native and node versions.

Right now, when you start debugging React Native apps, WebStorm starts a new Chrome instance and attaches to it. You can use DevTools together with WebStorm to debug the app.
If you don’t want to see any new Chrome windows, you can add --headless flag to the Chrome settings in React Native debug configuration. Note that in this case, Chrome Headless will keep running after you’ve stopped debugger in WebStorm.

configure-chrome-headless

Debugging React Native apps that use Expo

You can now debug React Native apps that use Expo in WebStorm.

To do that, you need to create a new React Native configuration. In it, disable Build and Launch application (since Expo takes care of it).

Instead of react-native start we need to run the npm task start to run the dev server – we can configure that if we click the edit icon next to the
Start React Native Bundler task.

One last thing that we need to do is change the port used to connect to the bundler. In Expo it’s 19001.

react-native-debug-configuration-for-expo

Save the configuration and hit debug. Then open Expo client app on your phone or simulator, select the current app and enable remote debugging.

Showing expression info

As you might know, if you hold Cmd or Ctrl and hover over a symbol in JavaScript or TypeScript, you will see some information about it, for example, where and how it’s defined and in TypeScript also the type information.

In WebStorm 2018.1 we have significantly reworked the way this information is presented. We made the presentation of type info more consistent for different cases.

WebStorm 2017.3
property-interface-20173

WebStorm 2018.1property-interface-20181

WebStorm 2017.3param-info-ws-20173

WebStorm 2018.1param-info-ws-20181

We hope that with these improvements, this feature will become much more useful.

Please share your feedback and report issues on our tracker. Thank you!

WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Early Access Preview and tagged , , . Bookmark the permalink.

15 Responses to WebStorm 2018.1 EAP, 181.3263.21: improvements for React Native, extract Vue component

  1. Angular says:

    Why is it Angular CLI is broken in Webstorm Ubuntu? Please take a look if it’s working properly or it’s just my device.

    • Ekaterina Prigara says:

      What versions of Angular CLI and WebStorm do you use? Please describe the exact problem. Do you see any error messages?

  2. Bert says:

    Are these new React Native debug capabilities (including expo) available in IntelliJ?

  3. Mike Wazowski says:

    Hello guys! I’v found bug (don’t think it’s a serious, but anyway). When I extend one component from the (using Vue native approach with the “extend” word), WebStorm does not understand that the child template also has components that have been declared in the parent vue class.

    Example is here: https://jsfiddle.net/0ed2tq15/4/

  4. Vidar Ramdal says:

    The “Extract Vue component” refactoring looks great!

    Any plans for a “Extract React component” refactoring?
    Is there an issue for this that I can vote on?

  5. Gerard says:

    I m new to react native.
    I used the create-react-native-app to create the project and then opened it with webstorm 2018.1. using react native cli in configuration, it opens two consoles one to run “react-native start” and another to run “react-native-cli run-android”. but the latter one stops at scanning folders.
    i already have the 64 bit marshmallow emulator running.
    Thanks

  6. Peter says:

    Hello, I’m just struggling with jest run/debug configuration for a react-native app generated by Expo XDE. I added jest-expo package. As required I added “test”: “node_modules/.bin/jest” to “scripts” in my package.json file.
    Running npm test from the terminal works fine. But I cannot point to the node_modules/.bin/jest.js in my jest run/debug config. Any solution?
    Thanks for your help!

    • Peter says:

      Edit: I use WebStorm 2018.2.2 on Linux.

    • Ekaterina Prigara says:

      Hello Peter, in the Jest run/debug configuration WebStorm expects the path to the Jest package and not the executable. Please try something like project-folder/node_modules/jest.

  7. Steve says:

    > Right now, when you start debugging React Native apps, WebStorm starts a new Chrome instance and attaches to it.

    Is it possible to connect “react-native-debugger” ( https://github.com/jhen0409/react-native-debugger ) in the way described here? It seems like it is also a chromium based but includes support for debugging the react DOM and redux state.

    It would be great to use this and see breakpoints stopping inside the IDE!

    Is there an issue already tracking this?

    • Ekaterina Prigara says:

      Hello,
      WebStorm’s debugger has its own UI and it integrates with the Chrome’s debug protocol. That means that to be able to show the React DOM and Redux state, WebStorm needs to implement this whole functionality from scratch. Right now we don’t have any plans for that, sorry. There’s an issue about the support of the Redux Devtools’ features in WebStorm that you can follow: https://youtrack.jetbrains.com/issue/WEB-20053

Leave a Reply

Your email address will not be published. Required fields are marked *