React Native常用IDE推荐与安装配置

http://blog.csdn.net/u014484863/article/details/51554428

（一）前言

上一讲提到了React Native框架安装和运行,以及创建了一个项目并介绍这个项目结构。这样介绍项目项目结构其实极其不方便，这一节将介绍开发ReactNative常用的IDE.
所谓工欲善其事必先利其器，做React Native开发也和其他应用开发一样。现在推荐使用几款比较好的IDE: sublime、webstorm以及官网推荐的Nuclide、VSCode。下面主要介绍其中的三款IDE—— webstorm、Nuclide以及VSCode。

（二）Nuclide常规安装以及配置

Nuclide是Facebook专门为React开发的IDE,官网推荐。但是Nuclide是在Atom基础上面提供了一系列统一的插件。所以我们需要首先安装Atom。 

Nuclide项目官方地址:https://github.com/facebook/nuclide

2.1 Atom安装

Atom是一个开源版本的编辑器，非常强大以及完美体验，Atom最大的特色就是可以安装很多的插件来完成我们的需求。官网地址:https://atom.io/ 去官网下载安装即可。

2.2 Nuclide 安装（不推荐安装方式）

Atom已经安装成功了，下面开始安装Nuclide，直接打开Atom软件，点击Atom-> Preferences打开Setting，然后点击install，输入nuclide-installer搜索，进行下载即可，如下图： 



这种方式我们是选择插件下载进行安装，另外的一种方式我们可以直接在命令行执行以下命令(利用Atom的包管理器apm安装):

apm install nuclide

1
1

最后重启一下Atom即可。不过这两种方式都不太推荐大家使用，这两种方式一方面是安装速度比较慢，而且下载安装完之后Atom会很卡，然后提示找不到Nuclide相关模块。

2.3 Nuclide安装（强烈推荐安装方式）

Nuclide项目官方地址：https://github.com/facebook/nuclide，我们知道该项目是Facebook官方推荐的，当然我们也给开发者提供了一种源代码编译安装的方式。使用起来非常简单：

git clone https：//github.com/facebook/nuclide.git
cd nuclide
npm install
apm link

1
2
3
4
1
2
3
4

终端安装截图如下： 



这样就安装完成，可以开始写React Native项目代码了。至于项目初始化以及编译运行方法，大家可以看前一篇文章哦！这里不再赘述。

(三) WebStorm IDE 介绍和安装

我相信做工Web前段的童鞋们，肯定对WebStorm IDE 非常熟悉，WebStorm是jetbrains公司旗下一款JavaScript开发工具。被广大中国JS开发者誉为“Web前端开发神奇”、“最强大的HTML5编辑器”、“最智能的JavaScript
IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。该IDE官网地址:https://www.jetbrains.com/webstorm/ 。该新版本已经支持了React了，所以在现如今的开发阶段WebStorm已经算是支持性最好的IDE了，大家有兴趣可以下载使用一下哦！但是…….要收费的，要收费的。土豪忽略，至于破解版本看你自己了。 





最后通过WebStorm打开我们一个已经存在的React Native项目。 

(四)VSCode安装以及插件配置

直接讲VSCode安装实在突兀，先介绍一下VSCode。

在 Build 2015 大会上，微软除了发布了 Microsoft Edge 浏览器和新的 Windows 10 系统外，最大的惊喜莫过于宣布推出免费跨平台的 Visual Studio Code 编辑器了！

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、Git 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持
Win、Mac 以及 Linux，运行流畅，可谓是微软的良心之作……

4.1 安装Visual Studio Code

下载地址：https://code.visualstudio.com/Updates 

下载下来直接拖到Application中就可以使用了。

4.2 安装VSCode扩展工具

如果在VSCode上开发React Native，安装一个扩展工具可以带来极大的方便以及提高开发效率。该插件可以提供以下这些功能：调试代码、命令面板终端快速执行Reac-native命令、代码智能补全、React Native API以及React对象搜索浏览。 

使用效果演示如下： 



安装步骤： 

打开VSCode软件，按 Fn+F1; 

键入 ext install React Native； 

点击安装； 

重启VSCode。截图如下： 



如果你没有安装React-native，请参考前面的文章安装。React-native-cli要求在0.1.10以上版本；React-Native要求在0.19以上版本。

4.3 使用VSCode于React Native项目

第一：调试配置 

首先导入项目到VSCode中，点击debugger icon 

，然后点击配置icon 

，然后选择React
Native。如下图： 


 

VSCode将在项目中生成一个 launch.json，这个文件包含一些默认配置，例如下面所显示： 


 

你可以修改哪些配置或者添加新的配置到这个列表中。你也可以利用在配置文件中其它的字段，例如，你能修改 target 字段指定iOS调试的模拟器

第二：开始调试（Start debug session） 

为了开始调试，通过配置下拉框选择一个调试项，然后点击运行箭头或者Fn+F5按键。这一步相当于Android平台运行的运行方式：react-native
run-native； 

iOS平台在Xcode中运行项目。 

如图所示： 


 

开发者可以调试Android平台的模拟器与设备，但是iOS平台的模拟器也是使用Fn + F5，但是iOS平台真机调试需要手动配置一些东西。配置如下： 

调试iOS真机（Debugging on iOS device）：
需要安装 ideviceinstaller 命令行：

brew install ideviceinstaller 

配置launch.json文件，设置target为“device”
根据这篇文章真机配置 去修改jsCodeLocation IP在你的应用中
然后点击运行或者 Fn+F5 运行程序。
摇一摇设备，打开开发者菜单，并且选择”Debug in Chrome”

4.4 命令面板终端中使用React Native命令

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



运行Android命令，触发react-native run-android 来进行打开android app
运行iOS命令，触发react-native run-ios来进行打开并且在iOS模拟器中运行(iPhone 6)
Packager命令，可以允许我们打开/关闭React-Packager

4.5 使用智能提醒（Using IntelliSense）

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

4.6 开启智能提醒

【注意】：这部分涉及到老版本的VSCode和React Native工具。最新版的VSCode（1.1.1）支持智能提醒For Salsa，以前的老版本属于测试阶段，需要开启智能提醒。这些指导说明支持老版本（<=
0.10.9）

React Native智能提醒功能依赖于支持JSX语法的实验性特性在VS Code，打开了这些特性，你将会立马看到如下一个提醒当你打开一个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目录中

4.7 存在已知问题：

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

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

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

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

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

转载自：http://www.lcode.org/vscode-react-native-tools/