轉 ： React Native 開發之 IDE 選型和配置

轉：https://mp.weixin.qq.com/s?__biz=MzA3ODg4MDk0Ng==&mid=2651112392&idx=1&sn=135e29ddde3050d469be98db815c267e&scene=0&key=18e81ac7415f67c4bcc2eaac3ca13f8d294ec1b8fa5828d4d7f13f2e81cc62f72e55e828ee04e2002284521336a3766d&ascene=0&uin=Mjc3OTU3Nzk1&devicetype=iMac+MacBookPro10%2C1+OSX+OSX+10.10.5+build%2814F1808%29&version=11020201&pass_ticket=IYYr6c4vUnT0%2Bavp7Kh4QX0%2F3Due6hVy8D0M%2FE3HusZ%2B3%2BljLKzmZgKeEGJNzgOF

 

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