版權聲明：本文為博主原創文章，未經博主允許不得轉載。 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進行開發。
對於三種IDE的對比及開發細節，會不斷進行更新。
---------------------
作者：溫明妍
來源：CSDN
原文：https://blog.csdn.net/yayayaya20122012/article/details/51119801
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！