轉 ： 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