原文連結：

http://www.infoq.com/cn/articles/react-native-ide?utm_campaign=rightbar_v2&utm_source=infoq&utm_medium=articles_link&utm_content=link_text

React Native 釋出一年多了，有不少公司已經在線上產品中或小範圍試水，或大範圍應用，很多公司或開發者都在為 React Native 的生態系統作出自己的貢獻。

React Native 的開發基本上是 Javascript ＋ 系統原生開發語言（Java，Objective-C，Swift），原生語言的開發所用的 IDE 沒有多餘的選擇，Android 平臺只能使用 Android Studio（不要告訴我你還在使用 Eclipse），iOS 平臺只能使用 XCode，而開發 Javascript 的 IDE 選擇就多了，從 FaceBook 官方推薦的 Atom＋Nuclide，到與 Android Studio 同系列的 Javascript IDE WebStorm，再到功能強大的 Sublime Text 3，以及微軟推出的 Visual Studio Code 和 decosoftware 專門為 React Native 打造的開源 IDE Deco，甚至 Vim，NodePad++ 等等，都可以用來開發 React Native，唯一的前提能夠支援識別 Javascript 語法，識別 JSX 和 React Native API 的智慧提醒。接下來我們就來介紹最常用的五款 IDE 的配置和選型。

Atom＋Nuclide

Atom 是由 Github 打造的下一代程式設計開發利器，支援 Windows、Mac OS X、Linux 三大桌面平臺，免費且開源。Atom 支援各種程式語言的程式碼高亮，同時具備強大的程式碼補全功能，能夠極大的提高程式設計效率，Atom 本質上是一個文字編輯器，而不是一個 IDE，因此在用來開發 React Native 時需要配合 Nuclide 一起使用。

Nuclide 是 Facebook 基於 Atom 的基礎上開發的一個外掛 IDE，可以用來開發 React Native，iOS 和 Web 應用，目前不支援 Windows 平臺，只支援 Mac OS X 和 Linux。

Nuclide 內建了對 React Native 的支援，包括程式碼自動補全，程式碼診斷等，下圖是程式碼補全的截圖：

Nuclide 是 Facebook 官方提供的 React Native IDE，對 React Native 的支援應該是最好的，因此，推薦大家首選這個，如果在你的電腦執行起來不會卡頓的話。Nuclide 的安裝很簡單，在確保 Atom 安裝之後，在命令列中執行 apm install nuclide 即可。在使用 Nuclide 之前，建議好好看下官網的說明：https://nuclide.io/docs/quick-start/getting-started/

WebStorm

WebStorm 是著名的 JetBrains 公司開發的號稱最智慧的 Javascript 整合開發環境，可以用於複雜的客戶端應用開發以及基於 Node.js 的服務端開發。如果你之前使用 Android Studio 開發過 Android 應用的話，你一定會覺得 WebStorm 的介面似曾相識，沒錯，因為 WebStorm 和 Android Studio 都是 JetBrains 的傑作。WebStorm 支援 Windows、Mac OS X、Linux 三大桌面平臺，不過和 Android Studio 可以免費使用不同，WebStorm 是需要付費使用的，只有 30 天的試用期。

由於 React Native 是基於 React 的，而 React 使用的是 JSX 語法，因此，使用 WebStorm 開發 React Native 之前，我們首先需要設定支援的 Javascript 語法，點選 WebStorm-Preferences，在開啟的對話方塊中選擇 Javascript language version 為 JSX Harmony 即可在程式碼編輯器中識別 JSX，如下圖所示：

當然，到這一步，只能使得編輯器識別 JSX 語法的 Javascript 程式碼，不會導致程式碼標紅，但對於 React Native 的 API 名稱，元件名稱等並不會智慧提醒和自動補全，因為目前 WebStorm 只支援 React 語法，還不支援 React Native 語法。為了解決這個問題，我們可以使用一個開源的外掛：ReactNative-LiveTemplate，按照 Github 上面的說明安裝外掛並重啟 WebStorm 之後生效，這時在編輯器中輸入 React Native 的元件或者 API 的首字母，會自動聯想出相應的元件，如下所示，方便了很多。如果在使用過程中覺得這個外掛有不完善的地方，你還可以在 Github 上面提交你的 Pull Request，貢獻自己的一份力量。

Sublime Text 3

Sublime Text 3 是一款廣泛使用的程式碼編輯器，支援 Windows、Mac OS X、Linux 三大桌面平臺，它是付費應用，但目前可以無限期的試用。它支援多種程式語言的語法高亮、擁有優秀的程式碼自動完成功能，還擁有程式碼片段（Snippet ）的功能，可以將常用的程式碼片段儲存起來，在需要時隨時呼叫，極大的提高程式設計效率。

Sublime Text 3 強大功能的支撐在於它的外掛機制，通過 Package Control 功能，開發者可以安裝各種需要的外掛，預設情況下，Sublime Text 3 沒有整合 Package Control，我們需要自己安裝。Package Control 有命令安裝和手動安裝兩種方式，建議優先選擇命令安裝，可以參考官網安裝指南。本文我們介紹命令安裝方式，在 Sublime Text 3 中通過 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)

上面的命令會建立安裝所需的包目錄，並下載 Package Control.sublime-package 到目錄中。安裝完成後，可以在 Preferences 選單下找到 Package Settings 和 Package Control 兩個子選單。

在 Sublime Text 3 中，React Native 開發相關的外掛主要有：

• babel-sublime：支援 Javascript，ES6 和 JSX 語法高亮

• react-native-snippets：支援 React Native 程式碼片段

在 Package Control 對話方塊中選擇 Package Control:Install Packages 並在彈出的對話方塊中輸入 Babel，即可找到 babel-sublime：

安裝完成之後，需要啟用它，如下圖所示選單操作即可：

react-native-snippets 外掛同樣通過 Package Control 進行安裝，在 Install Package 對話方塊中搜索 react-native-snippets 安裝即可：

安裝完成之後，在程式碼編輯器中輸入程式碼片段的縮寫，例如我們新建一個名為 UserDetail.js 的檔案，在其中輸入 rncc 來建立一個 React Native 的類，智慧提醒如下所示：

按下 Enter 鍵，外掛自動生成如下樣板程式碼，節省了很多手動輸入所需花費的時間：

除了 rncc，其他常見的程式碼片段如下所示，更多內容參見外掛的 Github 首頁。

Visual Studio Code

Visual Studio Code 是微軟推出的一個輕量級的開源 Web 整合開發環境，支援超過 30 種語言的開發，同時支援 Windows、Mac OS X、Linux 三大桌面平臺。對於開發 React Native 而言，微軟提供了專門的外掛：vscode-react-native，按照官網的說明進行外掛的安裝即可。這個外掛使得開發者可以在 VS Code 中除錯 React Native 程式碼，快速執行 react-native 命令，以及對 React Native 的 API 具備智慧提醒功能，如下所示：

Deco

Deco 是不久前剛釋出的一個開源的專門為 React Native 打造的 IDE，目前只支援 Mac OS X 平臺。它封裝了 React Native 開發中經常會使用到的功能，例如整合 npm install 功能，整合 iPhone 和 iPad 模擬器，新建工程時快速生成 AwesomeProject，開發者不再需要通過執行 react-native init AwesomeProject 命令來生成了，關鍵是如果網路不好的話，免去了漫長的等待。

Deco 區別於其他 IDE 最顯著的特性是支援常用控制元件的拖拽生成程式碼和視覺化編輯，這些控制元件既有 React Native 原生控制元件，也有一些知名的開源控制元件，當然，目前 Deco 整合的數量還比較少，如下圖所示，我們拖拽一個名為 Lightbox 的開源控制元件，如果是第一次使用，Deco 會執行 npm install react-native-lightbox 命令首先下載安裝這個控制元件，然後在程式碼編輯區自動生成程式碼，同時在右邊的屬性編輯區中會有對應的屬性值，修改屬性編輯區的屬性值，會實時反應到程式碼中。

更直觀的感受可以自己下載 Deco 執行一下，或者到官網觀看一個 30 秒的演示視訊。

總結

本文介紹了目前開發 React Native 的幾款可選的主流 IDE，大家可以根據自己的具體情況進行選擇，當然，團隊開發中建議使用統一的 IDE。選擇哪一款 IDE，首先取決於你們團隊的硬體配置以及對付費軟體使用的態度，然後才是 IDE 的功能特性。

• 如果你的團隊都是使用 MacBook Pro 進行開發，那麼上面五款 IDE 都可以使用，如果團隊中既有 Windows 電腦，也有 Mac 電腦，那麼 Atom ＋ Nuclide 和 Deco 就使用不了了。

• 如果你們團隊能夠負擔起付費應用，那麼 WebStorm 是不錯的選擇，特別對於之前是 Android 開發的同學來說，可以實現 Android Studio 和 WebStorm 的無縫銜接。

• 如果上面兩個條件都不滿足，那麼就只剩下 Sublime Text 3 和 Visual Studio Code 可選了。從我們上面的介紹中可以瞭解到，這兩款也都是非常強大的，如何選擇取決於你自己。

拓展閱讀

• VS Code（1.2.0）最新亮點和特性全介紹：https://code.visualstudio.com/Updates#1.2

• Atom 1.8和1.9 beta釋出：http://blog.atom.io/2016/06/06/atom-1-8-and-1-9-beta.html

• React Native開發IDE安裝及配置：http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E5%BC%80%E5%8F%91ide%E5%AE%89%E8%A3%85%E5%8F%8A%E9%85%8D%E7%BD%AE/

• 新編碼神器Atom使用紀要：http://www.jeffjade.com/2016/03/03/2016-03-02-how-to-use-atom/

• Visual Studio Code Guide[中文版]：http://i5ting.github.io/vsc/

• Sublime Text 3 搭建 React.js 開發環境：https://segmentfault.com/a/1190000003698071

• 用Sublime 3作為React Native的開發IDE：http://www.jianshu.com/p/2ddfff095e90