工欲善其事，必先利其器——React Native的 IDE

版权声明：本文为博主原创文章，未经博主容许不得转载。 https://blog.csdn.net/yayayaya20122012/article/details/51119801
以前的文章中，咱们已经对于在OS X系统上对React Native 的环境搭建，以及第一个实例作了讲解。所谓工欲善其事，必先利其器，对于开发者来讲，选择一款比较好的IDE也是一件很重要的事情。这篇文章就来比较和推荐如下几款工具：Sublime、WebStorm、Nuclide。

Nuclide
Nuclide是Facebook专门为React开发的IDE，所以，Nuclide拥有很好的语法补全、类型检查等支持。
本质上，Nuclide是Atom基础上的一系列插件集合。所以，要使用Nuclide，首先须要安装Atom。Atom是Github退出的开源编辑器。是使用node.js来做为插件的语言的。

1. 安装Atom
从Atom官网中下载并安装

2. 安装Nuclide
打开Atom，选择Preferences --> +install ，输入Nuclide进行搜索并安装。

因为目前版本的Atom性能太卡，所以萌生了用Sublime来搭配React Native的插件来进行开发。

Sublime
1. 安装Sublime Text 3
到Sublime Text 官网下载。

选对相应的平台进行安装便可。

2. 安装Package Control
在Sublime Text 3中使用PackageControl安装插件。
使用Ctrl + 或者经过View –> Show Console `打开命令行，粘贴如下代码：

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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)
1
若是没有安装成功，请看这里。

3. 安装React Native 须要用到的插件
0> React Native 开发推荐的一些插件：
ReactJS：支持React开发，提供JSX代码提示，高亮显示，ReactJS官方介绍
Emmet：前端开发必备，可以存储和重用开发代码块，Emmet介绍
Terminal：在Sublime中打开终端并定位到当前目录，（快捷键cmd+shift+T）
react-native-snippets：react native 代码片断，react-native-snippets官方介绍
1> 打开Package Control：点击菜单栏Preferences-->Package Control 或者使用快捷键 Ctrl + Shift + T
2> 输入install选中：Package Control:install package
3> 等待几秒，在弹出的终端中输入想要安装的插件。
最终安装好插件后界面以下：

（以上界面中已安装Material Theme插件）

WebStorm
以前作过web相关的同窗们，对于WebStorm IDE应该很是熟悉了。这个IDE是jetbrains公司旗下的一款JavaScript开发工具，被广大的中国JS开发者誉为“Web前端开发神器”等。他与Interllij IDEA 同源，集成了Interllij的部分JavaScript功能。Interllij版本已经支持React了，因此在现现在的开发阶段WebStorm已经算是支持性最好的IDE了。

设置WebStorm支持JSX
安装好WebStorm以后，对于JSX最好先配置一下：打开Settings，做以下配置

 

ReactNative 代码智能提醒
IDE最多使用到的就是代码只能提醒，为了可以让WebStorm可以支持React Native的提醒，能够下载ReactNative-LiveTemplate。
如下为官方提供的安装及使用方式，现将其记录至如下处。

git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
1
下载的文件包括ReactNative.jar。
该提醒包括
1. 组件名称
2. Api名称
3. 全部的StyleSheets的属性
4. 组件的属性

要安装RN的只能提醒，能够经过两种方式进行。

安装方式
方法一
file –> import settings –> ReactNative.jar

方法二
将ReactNative.xml复制到~/Library/Preferences/WebStorm11/templates而后重启。

使用方式
通用方法
直接输入组件 或 Api 名称的首字母, 好比想要 View ,只要输入 V自动提示代码里就会看到 View

StyleSheet属性提示
首先 按下 command + J , 而后输入属性名的 首字母
如: 输入 f ,会自动提示 fontSize,fontFamily,fontStyle…等等

因为代码的智能提示不全，（如没有AppRegistry.registerComponent的代码提示），而且部分React Native框架提供的方法会报“未使用方法”的警告（如ListView的componentDidMount方法），对于一些强迫症开发者来讲，会有些不适感。

 

另外，因为WebStorm的内存占用500M左右，对于小内存的开发者来讲，不是最好的选择。

总结
本文对比了三种React Native的IDE，从结果上来看：

因为官方提供的Nuclide基于Atom，运行时太卡，所以通常的RN开发不会首先考虑使用。因为WebStorm是Interllij旗下的JS工具，所以对于Android开发者移植开发RN是有帮助的。但因为部分智能联想不太完备，加上对于RN的系统方法报“未使用”的警告，该IDE仍是有须要改进的地方。Sublime运行和关闭很是快捷，安装插件后的开发十分方便，但因为须要安装过多的插件，在PackageControl读取插件时须要等待，甚至有时，没法读取远程插件列表，在安装插件上会耗费一些时间。笔者在对三种开发IDE进行一段时间的开发，认为Sublime在安装好了插件后，不管是打开方式，代码界面整洁度上，都比其余两种方式较为温馨，所以，笔者较为推崇Sublime进行开发。