工欲善其事，必先利其器——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進行開發。