轉 ： 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 開發環境：1190000003698071

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

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