首页 » React Native » React Native技术文章 » 正文

React Native VSCode IDE超强开发插件介绍(智能,代码提醒,运行调试…)

本文翻译自:https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native

转载请注明:来自江清清的技术专栏

刚创建的React Native技术交流2群(496601483),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

(一)React Native工具(预览版)

该扩展工具(React Native Tools)给React Native项目提供了一个开发环境。你可以调试你的代码、通过命令面板终端快速的运行react-native命令、并且支持代码智能补全,对象搜索浏览、方法、参数以及其他一些React Native  API。使用效果演示如下:

(二)开始使用(Getting started)

1.在VS Code中安装扩展(0.10.8+)-插件地址:https://github.com/Microsoft/vscode-react-native

2.命令行运行npm install -g react-native-cli来安装React Native CLI(0.1.10+)

3.然后React Native环境,版本需0.19+  具体Windows和Mac OS X安装React Native教程:http://www.lcode.org/react-native/

4.使用VS Code通过React Native的根目录进行打开

5.可选开启代码智能补全(该还在测试中)

(三)调试(Debugging)

3.1.安装调试环境(Setup debug environment)

在菜单中点击调试图标 ,然后点击configure齿轮样子的图标来选择React Native调试环境,以上两个小图标的样式分别如下:

VSCode会生成一个launch.json文件保存在项目,同时里面会有一些默认的数据配置,如下图所示:

上面的配置文件你可以修改这些配置信息,或者往列表中添加新的项。你也可以在这些配置信息中使用其他属性。

例如:你可以修改target属性来指定iOS调试的模拟器

3.2.开启调试(Start debug session)

为了开始调试,通过配置下拉框选择一个调试项,然后点击运行箭头或者F5按键.如下图所示:

你可以调试Android模拟器,Android设备或者iOS模拟器中的应用,当前插件提供iOS设备的支持。有关使用VS Code进行调试的更多详细信息请点击查看

3.3.使用iOS设备调试(Debugging on iOS Device)

采用iOS设备调试需要完成以下一些常规步骤:

①.在APP中改变jsCodeLocation IP,更多详细的步骤请点击查看

②.从调试配置下拉框选择Debug iOS并且按F5按键

③.摇一摇设备,打开开发者菜单,并且选择"Debug in Chrome"

(四).命令面板终端中使用React Native命令

在命令面板中,可以匹配React Native类型命令,并且选择命令,如下图所示:

 

①.运行Android命令,触发react-native run-android 来进行打开android app

②.运行iOS命令,触发react-native run-ios来进行打开并且在iOS模拟器中运行(iPhone 6)

③.Packager命令,可以允许我们打开/关闭React-Packager

(五).使用智能提醒(Using IntelliSense)

代码智能提醒可以帮助我们发现React Native中相关对象,方法以及参数,具体效果如下图所示:

(六).开启智能提醒(Enabling IntelliSense)

该功能现在还处理测试实验阶段,所以我们需要开启该功能,React Native智能提醒功能依赖于VS Code工具支持JSX语法。为了打开该特性,当我们打开React Native项目的时候,会立即出现如下的提示。

该提醒是一次性的是的开启JSX支持,我们需要重启VS Code来让该智能提醒功能生效。同时我们可以验证是否已经正确安装,如果现实如下的状态条,就表示当前已经开启了智能提醒功能。

一旦你遵循以上的步骤进行开启智能提醒功能,你就可以在代码编辑器中看到React Native库中的对象,方法,参数相关提醒了。

下面是一些开启JSX支持,VS Code的配置做了一些如下修改:

①.环境变量VSCODE_TSJS=1设置来开启Salsa

②.Salsa需要最起码TypeScript 1.8版本,但是最终1.8发布版本还不可用。插件typescript@nexet安装在~/.vscode

③.在.vscode目录中生成一个setting.json文件,文件中使用typescript.tsdk来指向typescript@next安装的位置

④.在项目根目录中创建tsconfig.json文件,并且配置allowsJs:true来允许TypeScript来处理JavaScript文件

⑤.React Native的Typing复制到.vscode目录中

(七).已知的问题

下面列表一下,在使用本插件中可能会遇到的一些已知的问题。

①.调试器不能关闭断点:  该调试器仅仅会在通过VS Code打开packager服务中运行。如果packager在VS Code外部运行需要关闭packager

②.'adb' 命令没有找到: 如果你遇到adb:command not founc,那么你需要进行配置android环境变量了。最好把PATH和ANDROID_HOME环境变量都配置上.

③.目标iPhone 6不工作:当使用iPhone6运行app的时候,该为一个已知的问题,详细请点击:

最后点击这边查看已经解决的所有的问题。

(八)最后总结

今天我们主要翻译讲解了提高React Native开发效率的插件 React Native Tools(VS Code Tools)。该插件挺好的支持了代码智能提醒,运行调试,,大家有问题可以加一下群React Native技术交流2群(496601483).或者底下进行回复一下。

尊重翻译,转载请注明:From Sky丶清(http://www.lcode.org/) 侵权必究!

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)

关注我的微博,可以获得更多精彩内容