{"id":22877,"date":"2018-02-01T15:57:09","date_gmt":"2018-02-01T15:57:09","guid":{"rendered":"https:\/\/blog.jetbrains.com\/webstorm\/?p=9457"},"modified":"2018-02-05T14:26:00","modified_gmt":"2018-02-05T14:26:00","slug":"webstorm-2018-1-eap-181-3263","status":"publish","type":"webstorm","link":"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2018\/02\/webstorm-2018-1-eap-181-3263","title":{"rendered":"WebStorm 2018.1 EAP, 181.3263.21: improvements for React Native, extract Vue component"},"content":{"rendered":"

The new WebStorm 2018.1 Early Preview build (181.3263.21) is now available!<\/p>\n

You can update via\u00a0Toolbox App<\/a>, or download the build\u00a0here<\/a>\u00a0and install it beside your stable WebStorm version.<\/p>\n

<\/i>Download WebStorm 2018.1 EAP<\/a><\/p>\n

To learn more about all the new features added in earlier WebStorm 2018.1 EAP builds, please check out these blog posts<\/a>.<\/p>\n

Extract Vue component<\/h2>\n

With this new intention you can now easily, without any copy and paste, extract a new Vue component from an existing one.<\/p>\n

Select the part of the template you want to extract, press Alt-Enter<\/em> and select Extract Vue
\nComponent<\/em>. Then type the name of the new component. WebStorm will create a new single-file component (or warn you if the name you\u2019ve selected is already used or invalid) and import it into the parent component.<\/p>\n

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.<\/p>\n

\"\"<\/p>\n

Running and debugging React Native apps<\/h2>\n

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

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?<\/p>\n

\"debug-react-native-app-in-simulator\"<\/p>\n

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<\/code> or run-android<\/code> command. Only after that, you can start debugging it.<\/p>\n

However, if you haven\u2019t made any changes to the native code in your application since the last build and the bundler is already running, you don\u2019t really need to rebuild it \u2013 you can just open the app in the simulator and then debug.<\/p>\n

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 \u2013 for that there\u2019s now a Build and Launch Application<\/em> checkbox.<\/p>\n

\"debug-react-native-app\"<\/p>\n

So if it\u2019s 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.<\/p>\n

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

\"configure-react-native-bundler\"<\/p>\n

Or if you have bundler already running, you can simply remove this step from the configuration (because you don\u2019t need to run more than one bundler per app).<\/p>\n

Update on using node for debugging<\/h3>\n

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.<\/p>\n

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.
\nIf you don\u2019t want to see any new Chrome windows, you can add --headless<\/code> flag to the Chrome settings in React Native debug configuration. Note that in this case, Chrome Headless will keep running after you\u2019ve stopped debugger in WebStorm.<\/p>\n

\"configure-chrome-headless\"<\/p>\n

Debugging React Native apps that use Expo<\/h3>\n

You can now debug React Native apps that use Expo<\/a> in WebStorm.<\/p>\n

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

Instead of react-native start<\/code> we need to run the npm task start<\/code> to run the dev server \u2013 we can configure that if we click the edit icon next to the
\nStart React Native Bundler<\/em> task.<\/p>\n

One last thing that we need to do is change the port used to connect to the bundler. In Expo it\u2019s 19001<\/code>.<\/p>\n

\"react-native-debug-configuration-for-expo\"<\/p>\n

Save the configuration and hit debug. Then open Expo client app on your phone or simulator, select the current app and enable remote debugging.<\/p>\n

Showing expression info<\/h2>\n

As you might know, if you hold Cmd<\/em> or\u00a0Ctrl<\/em> and hover over a symbol in JavaScript or TypeScript, you will see some information about it, for example, where and how it\u2019s defined and in TypeScript also the type information.<\/p>\n

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.<\/p>\n

WebStorm 2017.3
\n\"property-interface-20173\"<\/p>\n

WebStorm 2018.1\"property-interface-20181\"<\/p>\n

WebStorm 2017.3\"param-info-ws-20173\"<\/p>\n

WebStorm 2018.1\"param-info-ws-20181\"<\/p>\n

We hope that with these improvements, this feature will become much more useful.<\/p>\n

Please share your feedback and report issues on our\u00a0tracker<\/a>. Thank you!<\/strong><\/p>\n

WebStorm Team<\/em><\/p>\n","protected":false},"author":221,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","categories":[826],"tags":[2828,2844,2846],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22877"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/types\/webstorm"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/users\/221"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/comments?post=22877"}],"version-history":[{"count":0,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22877\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/media?parent=22877"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/categories?post=22877"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/tags?post=22877"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/cross-post-tag?post=22877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}