4861人阅读
React Native专题学习（31）
React Native常用IDE推荐与安装配置
（一）前言
上一讲提到了React Native框架安装和运行,以及创建了一个项目并介绍这个项目结构。这样介绍项目项目结构其实极其不方便，这一节将介绍开发React Native常用的IDE.
所谓工欲善其事必先利其器，做React Native开发也和其他应用开发一样。现在推荐使用几款比较好的IDE: sublime、webstorm以及官网推荐的Nuclide、VSCode。下面主要介绍其中的三款IDE—— webstorm、Nuclide以及VSCode。
（二）Nuclide常规安装以及配置
Nuclide是Facebook专门为React开发的IDE,官网推荐。但是Nuclide是在Atom基础上面提供了一系列统一的插件。所以我们需要首先安装Atom。
Nuclide项目官方地址:
Atom是一个开源版本的编辑器，非常强大以及完美体验，Atom最大的特色就是可以安装很多的插件来完成我们的需求。官网地址:
去官网下载安装即可。
2.2 Nuclide 安装（不推荐安装方式）
Atom已经安装成功了，下面开始安装Nuclide，直接打开Atom软件，点击Atom-& Preferences打开Setting，然后点击install，输入nuclide-installer搜索，进行下载即可，如下图：
这种方式我们是选择插件下载进行安装，另外的一种方式我们可以直接在命令行执行以下命令(利用Atom的包管理器apm安装):
apm install nuclide
最后重启一下Atom即可。不过这两种方式都不太推荐大家使用，这两种方式一方面是安装速度比较慢，而且下载安装完之后Atom会很卡，然后提示找不到Nuclide相关模块。
2.3 Nuclide安装（强烈推荐安装方式）
Nuclide项目官方地址：，我们知道该项目是Facebook官方推荐的，当然我们也给开发者提供了一种源代码编译安装的方式。使用起来非常简单：
git clone https：
cd nuclide
npm install
终端安装截图如下：
这样就安装完成，可以开始写React Native项目代码了。至于项目初始化以及编译运行方法，大家可以看前一篇文章哦！这里不再赘述。
(三) WebStorm IDE 介绍和安装
我相信做工Web前段的童鞋们，肯定对WebStorm IDE 非常熟悉，WebStorm是jetbrains公司旗下一款JavaScript开发工具。被广大中国JS开发者誉为“Web前端开发神奇”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。该IDE官网地址:
。该新版本已经支持了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
下载地址：
下载下来直接拖到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，这个文件包含一些默认配置，例如下面所显示：
你可以修改哪些配置或者添加新的配置到这个列表中。你也可以利用在配置文件中其它的字段，例如，你能修改
字段指定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”
命令面板终端中使用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的时候，该为一个已知的问题，详细请点击:
最后这边查看已经解决的所有的问题。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：28278次
排名：千里之外
原创：61篇
转载：19篇
(2)(2)(3)(12)(3)(27)(1)(5)(6)(1)(5)(6)(3)(1)(5)(2)React Native（10）
工欲善其事, 必先利其器.
ReactNative作为Facebook贡献的库, 里面有些定制的东西. 官方推荐Atom+Nuclide, 那么就尝试一下Atom. 在测试过程中, 发现安装Nuclide之后, Atom编辑器特别卡顿, 原因不明, 所以又测试了一些其他插件. 我来罗列几个必须的.
下载Atom编辑器, 安装, 介绍参考文档.
2.Atom-React
插件Atom-React, 这个插件非常好!
点击Atom-&Install Shell Commands, 安装Shell命令, 再输入
class="hljs cmake"&apm install react&
即可安装, 也可以直接搜索安装, Command+,, 选择Install搜索.
语法高亮(Syntax Highlighting); 缩进(Indentation), 搜索插件 -& Auto I
搜索插件Command+Shift+P, 直接输入Intent, 参考视频. 代码折叠(Code Folding); 片段提示(Snippets);
片段提示的缩写需要符合文件后缀名jsx, js等. JSX格式化(JSX Reformatting), 插件搜索Reformat, 选择Reformat JSX. HTML到JSX转换(HTML to JSX conversion), 转换代码样式; 自动补全(Autocomplete); 自动闭合标签(Automatic Closing Tag);
跳转对于调试代码和阅读代码非常重要, 当然使用插件, 需要下载hyperclick和js-hyperclick, 就可以通过引用跳转到需要类和方法.
4.注释插件
注释对于写和读代码都非常重要, 推荐插件docblockr, 搜索即可.
&code class="hljs java"&/**
* 滚动条, fractionalPosition滚动条长度, progressBarSize当前大小
{size:滚动条大小} {progress:过程}
[里外两层视图, 背景白框黑底, 显示白框]
5.类型显示
atom-typescript类型显示和其他强大的功能, 参考文档.
6.管理配置
安装了很多包之后, 可以通过编辑器管理; 如果要恢复初始, 删除.atom即可.
OK, 现在可以编写ReactNative程序了, 如果发现其他插件, 我会继续更新.
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：63577次
积分：1819
积分：1819
排名：第17017名
原创：113篇
转载：51篇
(1)(1)(3)(3)(2)(5)(13)(26)(16)(10)(18)(8)(29)(5)(3)(3)(1)(1)(5)(11)(1)React Native 开发之 IDE 选型和配置 - 简书
<div class="fixed-btn note-fixed-download" data-toggle="popover" data-placement="left" data-html="true" data-trigger="hover" data-content=''>
写了30195字，被62人关注，获得了223个喜欢
React Native 开发之 IDE 选型和配置
React Native 发布一年多了，有不少公司已经在线上产品中或小范围试水，或大范围应用，很多公司或开发者都在为 React Native 的生态系统作出自己的贡献。
React Native 的开发基本上是 Javascript ＋ 系统原生开发语言（Java，Objective-C，Swift），原生语言的开发所用的 IDE 没有多余的选择，Android 平台只能使用 Android Studio（不要告诉我你还在使用 Eclipse），iOS 平台只能使用 XCode，而开发 Javascript 的 IDE 选择就多了，从 FaceBook 官方推荐的 Atom＋Nuclide，到与 Android Studio 同系列的 Javascript IDE WebStorm，再到功能强大的 Sublime Text 3，以及微软推出的 Visual Studio Code 和 decosoftware 专门为 React Native 打造的开源 IDE Deco，甚至 Vim，NodePad++ 等等，都可以用来开发 React Native，唯一的前提能够支持识别 Javascript 语法，识别 JSX 和 React Native API 的智能提醒。接下来我们就来介绍最常用的五款 IDE 的配置和选型。
Atom＋Nuclide
Atom 是由 Github 打造的下一代编程开发利器，支持 Windows、Mac OS X、Linux 三大桌面平台，免费且开源。Atom 支持各种编程语言的代码高亮，同时具备强大的代码补全功能，能够极大的提高编程效率，Atom 本质上是一个文本编辑器，而不是一个 IDE，因此在用来开发 React Native 时需要配合 Nuclide 一起使用。
Atom编辑器现已支持Windows
Nuclide 是 Facebook 基于 Atom 的基础上开发的一个插件 IDE，可以用来开发 React Native，iOS 和 Web 应用，目前不支持 Windows 平台，只支持 Mac OS X 和 Linux。
Nuclide 内置了对 React Native 的支持，包括代码自动补全，代码诊断等，下图是代码补全的截图：
Nucilde 代码补全
Nuclide 是 Facebook 官方提供的 React Native IDE，对 React Native 的支持应该是最好的，因此，推荐大家首选这个，如果在你的电脑运行起来不会卡顿的话。Nuclide 的安装很简单，在确保 Atom 安装之后，在命令行中执行apm install nuclide即可。在使用 Nuclide 之前，建议好好看下。
WebStorm 是著名的 JetBrains 公司开发的号称最智能的 Javascript 集成开发环境，可以用于复杂的客户端应用开发以及基于 Node.js 的服务端开发。如果你之前使用 Android Studio 开发过 Android 应用的话，你一定会觉得 WebStorm 的界面似曾相识，没错，因为 WebStorm 和 Android Studio 都是 JetBrains 的杰作。WebStorm 支持 Windows、Mac OS X、Linux 三大桌面平台，不过和 Android Studio 可以免费使用不同，WebStorm 是需要付费使用的，只有 30 天的试用期。
由于 React Native 是基于 React 的，而 React 使用的是 JSX 语法，因此，使用 WebStorm 开发 React Native 之前，我们首先需要设置支持的 Javascript 语法，点击 WebStorm-Preferences，在打开的对话框中选择 Javascript language version 为 JSX Harmony 即可在代码编辑器中识别 JSX，如下图所示：
设置WebStorm以支持JSX
当然，到这一步，只能使得编辑器识别 JSX 语法的 Javascript 代码，不会导致代码标红，但对于 React Native 的 API 名称，组件名称等并不会智能提醒和自动补全，因为目前 WebStorm 只支持 React 语法，还不支持 React Native 语法。为了解决这个问题，我们可以使用一个开源的插件：ReactNative-LiveTemplate，按照 Github 上面的说明安装插件并重启 WebStorm 之后生效，这时在编辑器中输入 React Native 的组件或者 API 的首字母，会自动联想出相应的组件，如下所示，方便了很多。如果在使用过程中觉得这个插件有不完善的地方，你还可以在 Github 上面提交你的 Pull Request，贡献自己的一份力量。
使用ReactNative-LiveTemplate以支持ReactNative语法
Sublime Text 3
Sublime Text 3 是一款广泛使用的代码编辑器，支持 Windows、Mac OS X、Linux 三大桌面平台，它是付费应用，但目前可以无限期的试用。它支持多种编程语言的语法高亮、拥有优秀的代码自动完成功能，还拥有代码片段（Snippet ）的功能，可以将常用的代码片段保存起来，在需要时随时调用，极大的提高编程效率。
Sublime Text 3
Sublime Text 3 强大功能的支撑在于它的插件机制，通过 Package Control 功能，开发者可以安装各种需要的插件，默认情况下，Sublime Text 3 没有集成 Package Control，我们需要自己安装。Package Control 有命令安装和手动安装两种方式，建议优先选择命令安装，可以参考官网安装指南。本文我们介绍命令安装方式，在 Sublime Text 3 中通过 View-&Show Console 打开命令行，执行如下命令：
import urllib.request,os, h = 'e5ee549c' + '8bc59f460fa163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
# 换行版本在这，不换行是为了能在Sublime Text 3的命令行复制执行
import urllib.request, os,
h = 'e5ee549c' + '8bc59f460fa163dafc88';
pf = 'Package Control.sublime-package';
ipp = sublime.installed_packages_path();
urllib.request.install_opener(urllib.request.build_opener( urllib.request.ProxyHandler()));
by = urllib.request.urlopen('http://packagecontrol.io/' + pf.replace(' ', '%20')).read();
dh = hashlib.sha256(by).hexdigest();
print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
上面的命令会创建安装所需的包目录，并下载 Package Control.sublime-package 到目录中。安装完成后，可以在 Preferences 菜单下找到 Package Settings 和 Package Control 两个子菜单。
在 Sublime Text 3 中，React Native 开发相关的插件主要有：
babel-sublime：支持 Javascript，ES6 和 JSX 语法高亮
react-native-snippets：支持 React Native 代码片段
在 Package Control 对话框中选择 Package Control:Install Packages 并在弹出的对话框中输入 Babel，即可找到 babel-sublime：
找到babel-sublime
安装完成之后，需要启用它，如下图所示菜单操作即可：
启用babel-sublime
react-native-snippets 插件同样通过 Package Control 进行安装，在 Install Package 对话框中搜索 react-native-snippets 安装即可：
查找reactive-native-snippets
安装完成之后，在代码编辑器中输入代码片段的缩写，例如我们新建一个名为 UserDetail.js 的文件，在其中输入 rncc 来创建一个 React Native 的类，智能提醒如下所示：
按下 Enter 键，插件自动生成如下样板代码，节省了很多手动输入所需花费的时间：
插件自动生成样板代码
除了 rncc，其他常见的代码片段如下所示，更多内容参见插件的 Github 首页。
常见代码片段
Visual Studio Code
Visual Studio Code 是微软推出的一个轻量级的开源 Web 集成开发环境，支持超过 30 种语言的开发，同时支持 Windows、Mac OS X、Linux 三大桌面平台。对于开发 React Native 而言，微软提供了专门的插件：vscode-react-native，按照官网的说明进行插件的安装即可。这个插件使得开发者可以在 VS Code 中调试 React Native 代码，快速执行 react-native 命令，以及对 React Native 的 API 具备智能提醒功能，如下所示：
Visual Studio Code
Deco 是不久前刚发布的一个开源的专门为 React Native 打造的 IDE，目前只支持 Mac OS X 平台。它封装了 React Native 开发中经常会使用到的功能，例如集成 npm install 功能，集成 iPhone 和 iPad 模拟器，新建工程时快速生成 AwesomeProject，开发者不再需要通过执行 react-native init AwesomeProject 命令来生成了，关键是如果网络不好的话，免去了漫长的等待。
Deco编辑器
Deco 区别于其他 IDE 最显著的特性是支持常用控件的拖拽生成代码和可视化编辑，这些控件既有 React Native 原生控件，也有一些知名的开源控件，当然，目前 Deco 集成的数量还比较少，如下图所示，我们拖拽一个名为 Lightbox 的开源控件，如果是第一次使用，Deco 会执行 npm install react-native-lightbox 命令首先下载安装这个控件，然后在代码编辑区自动生成代码，同时在右边的属性编辑区中会有对应的属性值，修改属性编辑区的属性值，会实时反应到代码中。
可视化编辑
更直观的感受可以自己下载 Deco 执行一下，或者到官网观看一个 30 秒的演示视频。
本文介绍了目前开发 React Native 的几款可选的主流 IDE，大家可以根据自己的具体情况进行选择，当然，团队开发中建议使用统一的 IDE。选择哪一款 IDE，首先取决于你们团队的硬件配置以及对付费软件使用的态度，然后才是 IDE 的功能特性。
如果你的团队都是使用 MacBook Pro 进行开发，那么上面五款 IDE 都可以使用，如果团队中既有 Windows 电脑，也有 Mac 电脑，那么 Atom ＋ Nuclide 和 Deco 就使用不了了。
如果你们团队能够负担起付费应用，那么 WebStorm 是不错的选择，特别对于之前是 Android 开发的同学来说，可以实现 Android Studio 和 WebStorm 的无缝衔接。
如果上面两个条件都不满足，那么就只剩下 Sublime Text 3 和 Visual Studio Code 可选了。从我们上面的介绍中可以了解到，这两款也都是非常强大的，如何选择取决于你自己。
~~攒一张能中500w的彩票~~
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
收集ReactNative 系列文章
· 79人关注
~~攒一张能中500w的彩票~~
选择支付方式：