作者簡介：ASCE1885， 《Android 高級進(jìn)階》作者。
- 微信公眾號：asce1885
- 小密圈：Android高級進(jìn)階，詳情見這篇文章。
-
Github，簡書，微博，CSDN 知乎
本文首發(fā)于 InfoQ 移動技術(shù)公眾號：移動開發(fā)前線
由于潛在的商業(yè)目的，未經(jīng)許可不開放全文轉(zhuǎn)載許可，謝謝！
React Native 發(fā)布一年多了，有不少公司已經(jīng)在線上產(chǎn)品中或小范圍試水，或大范圍應(yīng)用，很多公司或開發(fā)者都在為 React Native 的生態(tài)系統(tǒng)作出自己的貢獻(xiàn)。React Native 的開發(fā)基本上是 Javascript ＋ 系統(tǒng)原生開發(fā)語言（Java，Objective-C，Swift），原生語言的開發(fā)所用的 IDE 沒有多余的選擇，Android 平臺只能使用 Android Studio（不要告訴我你還在使用 Eclipse），iOS 平臺只能使用 XCode，而開發(fā) Javascript 的 IDE 選擇就多了，從 FaceBook 官方推薦的 Atom＋Nuclide，到與 Android Studio 同系列的 Javascript IDE WebStorm，再到功能強(qiáng)大的 Sublime Text 3，以及微軟推出的 Visual Studio Code 和 decosoftware 專門為 React Native 打造的開源 IDE Deco，甚至 Vim，NodePad++ 等等，都可以用來開發(fā) React Native，唯一的前提能夠支持識別 Javascript 語法，識別 JSX 和 React Native API 的智能提醒。接下來我們就來介紹最常用的五款 IDE 的配置和選型。
Atom[1]＋Nuclide[2]
Atom 是由 Github 打造的下一代編程開發(fā)利器，支持 Windows、Mac OS X、Linux 三大桌面平臺，免費(fèi)且開源。Atom 支持各種編程語言的代碼高亮，同時具備強(qiáng)大的代碼補(bǔ)全功能，能夠極大的提高編程效率，Atom 本質(zhì)上是一個文本編輯器，而不是一個 IDE，因此在用來開發(fā) React Native 時需要配合 Nuclide 一起使用。
Nuclide 是 Facebook 基于 Atom 的基礎(chǔ)上開發(fā)的一個插件 IDE，可以用來開發(fā) React Native，iOS 和 Web 應(yīng)用，目前不支持 Windows 平臺，只支持 Mac OS X 和 Linux。
Nuclide 內(nèi)置了對 React Native 的支持，包括代碼自動補(bǔ)全，代碼診斷等，下圖是代碼補(bǔ)全的截圖：
Nuclide 是 Facebook 官方提供的 React Native IDE，對 React Native 的支持應(yīng)該是最好的，因此，推薦大家首選這個，如果在你的電腦運(yùn)行起來不會卡頓的話。Nuclide 的安裝很簡單，在確保 Atom 安裝之后，在命令行中執(zhí)行 apm install nuclide 即可。在使用 Nuclide 之前，建議好好看下官網(wǎng)的說明[3]。
WebStorm[4]
WebStorm 是著名的 JetBrains[5] 公司開發(fā)的號稱最智能的 Javascript 集成開發(fā)環(huán)境，可以用于復(fù)雜的客戶端應(yīng)用開發(fā)以及基于 Node.js[6] 的服務(wù)端開發(fā)。如果你之前使用 Android Studio 開發(fā)過 Android 應(yīng)用的話，你一定會覺得 WebStorm 的界面似曾相識，沒錯，因?yàn)?WebStorm 和 Android Studio 都是 JetBrains 的杰作。WebStorm 支持 Windows、Mac OS X、Linux 三大桌面平臺，不過和 Android Studio 可以免費(fèi)使用不同，WebStorm 是需要付費(fèi)使用的，只有 30 天的試用期。
由于 React Native 是基于 React 的，而 React 使用的是 JSX 語法，因此，使用 WebStorm 開發(fā) React Native 之前，我們首先需要設(shè)置支持的 Javascript 語法，點(diǎn)擊 WebStorm-Preferences，在打開的對話框中選擇 Javascript language version 為 JSX Harmony 即可在代碼編輯器中識別 JSX，如下圖所示：
當(dāng)然，到這一步，只能使得編輯器識別 JSX 語法的 Javascript 代碼，不會導(dǎo)致代碼標(biāo)紅，但對于 React Native 的 API 名稱，組件名稱等并不會智能提醒和自動補(bǔ)全，因?yàn)槟壳?WebStorm 只支持 React 語法，還不支持 React Native 語法。為了解決這個問題，我們可以使用一個開源的插件：ReactNative-LiveTemplate[7]，按照 Github 上面的說明安裝插件并重啟 WebStorm 之后生效，這時在編輯器中輸入 React Native 的組件或者 API 的首字母，會自動聯(lián)想出相應(yīng)的組件，如下所示，方便了很多。如果在使用過程中覺得這個插件有不完善的地方，你還可以在 Github 上面提交你的 Pull Request，貢獻(xiàn)自己的一份力量。
Sublime Text 3[8]
Sublime Text 3 是一款廣泛使用的代碼編輯器，支持 Windows、Mac OS X、Linux 三大桌面平臺，它是付費(fèi)應(yīng)用，但目前可以無限期的試用。它支持多種編程語言的語法高亮、擁有優(yōu)秀的代碼自動完成功能，還擁有代碼片段（Snippet
）的功能，可以將常用的代碼片段保存起來，在需要時隨時調(diào)用，極大的提高編程效率。
Sublime Text 3 強(qiáng)大功能的支撐在于它的插件機(jī)制，通過 Package Control 功能，開發(fā)者可以安裝各種需要的插件，默認(rèn)情況下，Sublime Text 3 沒有集成 Package Control，我們需要自己安裝。Package Control 有命令安裝和手動安裝兩種方式，建議優(yōu)先選擇命令安裝，可以參考官網(wǎng)安裝指南[9]。本文我們介紹命令安裝方式，在 Sublime Text 3 中通過 View->Show Console 打開命令行，執(zhí)行如下命令：
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)
上面的命令會創(chuàng)建安裝所需的包目錄，并下載 Package Control.sublime-package 到目錄中。安裝完成后，可以在 Preferences 菜單下找到 Package Settings 和 Package Control 兩個子菜單。
在 Sublime Text 3 中，React Native 開發(fā)相關(guān)的插件主要有：
在 Package Control 對話框中選擇 Package Control:Install Packages 并在彈出的對話框中輸入 Babel，即可找到 babel-sublime：
安裝完成之后，需要啟用它，如下圖所示菜單操作即可：
react-native-snippets 插件同樣通過 Package Control 進(jìn)行安裝，在 Install Package 對話框中搜索 react-native-snippets 安裝即可：
安裝完成之后，在代碼編輯器中輸入代碼片段的縮寫，例如我們新建一個名為 UserDetail.js 的文件，在其中輸入 rncc 來創(chuàng)建一個 React Native 的類，智能提醒如下所示：
按下 Enter 鍵，插件自動生成如下樣板代碼，節(jié)省了很多手動輸入所需花費(fèi)的時間：
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
View,
} from 'react-native';
class UserDetail extends Component {
render() {
return (
<View />
);
}
}
const styles = StyleSheet.create({
});
export default UserDetail;
除了 rncc，其他常見的代碼片段如下所示，更多內(nèi)容參見插件的 Github 首頁。
Visual Studio Code[12]
Visual Studio Code 是微軟推出的一個輕量級的開源 Web 集成開發(fā)環(huán)境，支持超過 30 種語言的開發(fā)，同時支持 Windows、Mac OS X、Linux 三大桌面平臺。
對于開發(fā) React Native 而言，微軟提供了專門的插件：vscode-react-native[13]，按照官網(wǎng)的說明進(jìn)行插件的安裝即可。這個插件使得開發(fā)者可以在 VS Code 中調(diào)試 React Native 代碼，快速執(zhí)行 react-native 命令，以及對 React Native 的 API 具備智能提醒功能，如下所示：
Deco[14]
Deco 是不久前剛發(fā)布的一個開源的專門為 React Native 打造的 IDE，目前只支持 Mac OS X 平臺。它封裝了 React Native 開發(fā)中經(jīng)常會使用到的功能，例如集成 npm install 功能，集成 iPhone 和 iPad 模擬器，新建工程時快速生成 AwesomeProject，開發(fā)者不再需要通過執(zhí)行 react-native init AwesomeProject 命令來生成了，關(guān)鍵是如果網(wǎng)絡(luò)不好的話，免去了漫長的等待。
Deco 區(qū)別于其他 IDE 最顯著的特性是支持常用控件的拖拽生成代碼和可視化編輯，這些控件既有 React Native 原生控件，也有一些知名的開源控件，當(dāng)然，目前 Deco 集成的數(shù)量還比較少，如下圖所示，我們拖拽一個名為 Lightbox 的開源控件，如果是第一次使用，Deco 會執(zhí)行 npm install react-native-lightbox 命令首先下載安裝這個控件，然后在代碼編輯區(qū)自動生成代碼，同時在右邊的屬性編輯區(qū)中會有對應(yīng)的屬性值，修改屬性編輯區(qū)的屬性值，會實(shí)時反應(yīng)到代碼中。
更直觀的感受可以自己下載 Deco 執(zhí)行一下，或者到官網(wǎng)觀看一個 30 秒的演示視頻[14]。
總結(jié)
本文介紹了目前開發(fā) React Native 的幾款可選的主流 IDE，大家可以根據(jù)自己的具體情況進(jìn)行選擇，當(dāng)然，團(tuán)隊(duì)開發(fā)中建議使用統(tǒng)一的 IDE。選擇哪一款 IDE，首先取決于你們團(tuán)隊(duì)的硬件配置以及對付費(fèi)軟件使用的態(tài)度，然后才是 IDE 的功能特性。
- 如果你的團(tuán)隊(duì)都是使用 MacBook Pro 進(jìn)行開發(fā)，那么上面五款 IDE 都可以使用，如果團(tuán)隊(duì)中既有 Windows 電腦，也有 Mac 電腦，那么 Atom＋Nuclide 和 Deco 就使用不了了。
- 如果你們團(tuán)隊(duì)能夠負(fù)擔(dān)起付費(fèi)應(yīng)用，那么 WebStorm 是不錯的選擇，特別對于之前是 Android 開發(fā)的同學(xué)來說，可以實(shí)現(xiàn) Android Studio 和 WebStorm 的無縫銜接。
- 如果上面兩個條件都不滿足，那么就只剩下 Sublime Text 3 和 Visual Studio Code 可選了。從我們上面的介紹中可以了解到，這兩款也都是非常強(qiáng)大的，如何選擇取決于你自己。
拓展閱讀
《VS Code（1.2.0）最新亮點(diǎn)和特性全介紹》[15]
《Atom 1.8和1.9 beta發(fā)布》[16]
《React Native開發(fā)IDE安裝及配置》[17]
《新編碼神器Atom使用紀(jì)要》[18]
《Visual Studio Code Guide[中文版]》[19]
《Sublime Text 3 搭建 React.js 開發(fā)環(huán)境》[20]
《用Sublime 3作為React Native的開發(fā)IDE》[21]
