版權宣告：本文為博主原創文章，未經博主允許不得轉載。 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
版權宣告：本文為博主原創文章，轉載請附上博文連結！