開發(fā)React navtive 基本上有三大IDE可選擇：
1. 官方的Nuclide
Nuclide是Facebook專門為React開發(fā)的IDE，據(jù)說語法補(bǔ)全等智能提醒功能不錯(cuò)，但是需要先安裝Atom，而且看網(wǎng)上的文章說Atom性能太卡，而且文件加載速度等方面也比較慢，這個(gè)我沒有去驗(yàn)證，不知道目前版本怎樣。而且目前主要是為了學(xué)習(xí)React navtive不建議過度依賴智能提醒功能，前期多多手寫代碼能夠讓我們盡早的熟悉React navtive語法，所以目前暫時(shí)放棄了Nuclide，以后熟悉了可能會(huì)考慮吧。
２. WebStorm
聽前端的小伙伴說這是Web前端開發(fā)神器，但是WebStorm有些吃內(nèi)存，所以建議小內(nèi)存的不要使用要不然同時(shí)開著AS和WebStorm沒準(zhǔn)會(huì)很卡，同時(shí)WebStorm也有React Native的智能提醒插件ReactNative-LiveTemplate。
３. Sublime
這個(gè)也是最終選擇的編輯器（也因?yàn)橐郧耙恢庇盟庉嬈渌谋?，哈哈）這是個(gè)非常輕量級(jí)的編輯器，Subline3安裝包才8.1M,而且無論是打開方式，代碼界面整潔度上，都比其他兩種方式較為舒適，集成Package Control后可以擴(kuò)展許多功能強(qiáng)大的插件，非常方便。而且使用Material Theme后真?zhèn)€界面看起來高大上許多。
Subline 3 開發(fā)React Native必備插件
需要先安裝Package Control才能導(dǎo)入其他插件。
安裝Package Control
打開subline 控制臺(tái)快捷鍵為 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)
如果安裝不成功，可使用官網(wǎng)辦法:https://packagecontrol.io/installation#st3
安裝成功后打開Sublime Text3 ，點(diǎn)擊菜單欄的“Preferences”-->"Package Control"或者CTRL+SHIFT+P打開終端窗口
選擇 Package Control:Install Package,等待幾秒，就會(huì)彈出一個(gè)終端，在終端輸入你想要安裝的插件，進(jìn)行查找，點(diǎn)擊下方列表中插件，就會(huì)自動(dòng)安裝
1 Terminal
用于在sublime中打開終端并定位到當(dāng)前目錄，調(diào)試必備。安裝好后可通過CTRL+SHIFT+T啟動(dòng)終端
2 react-native-snippets
react native 的代碼片段
具體用法可參考官網(wǎng)
3 ReactJS
代碼提示，高亮顯示等官網(wǎng)：https://github.com/facebookarchive/sublime-react
4 Material Theme
提升逼格的插件，隨意吧，效果圖看前面。
5 Emmet
仿CSS選擇器的語法來生成代碼，主要用于提高HTML/CSS代碼編寫的速度。官網(wǎng)
配置：
菜單 preferences -> Key bindings - Users，把下面代碼復(fù)制到[]內(nèi)部
{
"keys": [
"super+e"
],
"args": {
"action": "expand_abbreviation"
},
"command": "run_emmet_action",
"context": [{
"key": "emmet_action_enabled.expand_abbreviation"
}]
},
{
"keys": ["tab"],
"command": "expand_abbreviation_by_tab",
"context": [{
"operand": "source.js",
"operator": "equal",
"match_all": true,
"key": "selector"
}, {
"key": "preceding_text",
"operator": "regex_contains",
"operand": "(\\b(a\\b|div|span|p\\b|button)(\\.\\w*|>\\w*)?([^}]*?}$)?)",
"match_all": true
}, {
"key": "selection_empty",
"operator": "equal",
"operand": true,
"match_all": true
}]
}
使用CTRL+E啟動(dòng)。
更多插件看這里。
額外話
subline3設(shè)置自動(dòng)保存功能
subline3默認(rèn)關(guān)閉了自動(dòng)保存功能，每次運(yùn)行前都得ctrl+s非常不方便，要是忘了就更悲劇了。設(shè)置方式如下：
-
preferences ->settings
最后一句后面追加："save_on_focus_lost": true，注意上一句后面的逗號(hào)。
這樣subline3就開啟了自動(dòng)保存功能了，再也不用按ctrl+s。
