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

Ekaterina Prigara

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

Comments below can no longer be edited.

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

  1. Angular says:

    February 6, 2018

    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:

      February 6, 2018

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

  2. Bert says:

    February 24, 2018

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

  3. Mike Wazowski says:

    March 6, 2018

    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:

    May 15, 2018

    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?

    • Ekaterina Prigara says:

      May 15, 2018

      Hello Vidar,
      We hope to implement it in the upcoming WebStorm 2018.2 update, but we are not yet 100% sure we can do that on time. Please vote for and follow this issue: https://youtrack.jetbrains.com/issue/WEB-23894

  5. Gerard says:

    July 12, 2018

    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

    • Ekaterina Prigara says:

      July 16, 2018

      Can you please try running react-native run-android in the Terminal. Does it work?

  6. Peter says:

    August 29, 2018

    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:

      August 29, 2018

      Edit: I use WebStorm 2018.2.2 on Linux.

    • Ekaterina Prigara says:

      August 30, 2018

      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:

    September 15, 2018

    > 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:

      September 17, 2018

      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

  8. Dmitry says:

    December 29, 2018

    This is somewhat confusing, I can start the remote debug, but WebStorm doesn’t react to breakpoints, Is there anything obvious to check? I’m probably missing something

    • Ekaterina Prigara says:

      January 2, 2019

      Hello,
      What kind of application do you debug? None of the breakpoints is hit? Are they hit if you reload the app while the debugger is connected?

      • Dmitry says:

        January 2, 2019

        Hi, Ekaterina,

        Thank you for your reply!

        I found the issue: Chrome browser starts at localhost:19001, and cross-site scripting security doesn’t allow to call 127.0.0.1. I have to change localhost to 127.0.0.1 every time I start a debugger. Super annoying, but technically works.

        Also, this is also required for a real device debugging, when I’m using my computer’s IP address.

        I think it would be nice to either disable XSS checks or be able to select one of the ip address on the computer or provide an option to use a tunnel host (which uses port 80 as well).

        FYI, I’m using MacOS Mojave and iOS device / simulator.

        Thanks!

  9. Gazihan Alankus says:

    March 14, 2019

    Expo debug is currently broken. It runs fine until you press Ctrl+M and enable remote debugging. Then you get the red screen with this message: https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000773284-React-native-debugger-unable-to-connect-with-remote-debugger-

    • Ekaterina Prigara says:

      March 14, 2019

      Hello, please provide more information about the IDE, React Native and Expo versions that you’re using. Thanks!