ReactNative開發工具備這一篇足矣

https://www.cnblogs.com/vipstone/p/7125338.html

ReactNative系列文章：

1.《邏輯性最強的React Native環境搭建與調試》

2.《ReactNative開發工具備這一篇足矣》

正文

React Native（如下簡稱RN）開發工具的文章不少，幾乎千篇一概都是Copy的（一毛同樣），本文結合本身的實踐經歷，推薦給Coder最實用的RN開發工具，RN開發工具用這一篇足矣！

概述：開發RN的工具備不少，選擇性也比較多，好比Facebook專門爲React開發的IDE：Nuclide，還有作前端比較熟悉的WebStorm、Sublime Text 三、VS Code等。

面對這些IDE咱們應該怎麼選擇的呢？先說不推薦IDE排行榜：

Top1：Nuclide雖然是Facebook專門爲React開發的，但依託於Atom的Nuclide真是慢的出奇，性能低到沒法讓人忍受，若是你以爲本身是一個好性子，不妨驗證一番。

Top2：WebStorm這個工具對於我來講是很是熟悉的IDE從幾年前開始開發NodeJs一來一直使用的此IDE，他的缺點是慢、卡、容易崩潰，並且是收費的，雖然能夠破解但對於沒有用過的人來講，門檻也不低，但重要的是它的不穩定性崩潰和加載啓動的速度着實讓人不滿意。

說完了不推薦使用的IDE，下來講說我們的重點推薦IDE排行榜：

Top 2：Sublime Text 3啓動和關閉的速度簡直快的像打開text文本通常，當裝完插件以後也好用的能夠上天，下面說說具體的使用以及插件安裝和優化。

1.下載地址：http://www.sublimetext.com/3

2.安裝Package Control

Win系統可使用「Ctrl+`」快捷鍵或者經過View->Show Console菜單打開命令行，粘貼以下代碼：

1

import urllib.request,os; pf =  'Package Control.sublime-package' ; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path. join (ipp, pf),  'wb' ).write(urllib.request.urlopen(  'http://sublime.wbond.net/'  + pf.replace( ' ' , '%20' )).read())

3.安裝須要用到的插件

打開Sublime Text3 ，Win系統可使用快捷鍵CTRL+SHIFT+P 打開或者，點擊菜單欄的「Preferences」-->"Package Control"

打開的終端窗口，輸入「install」,下方就會提示「Package Control:install package」,用鼠標點擊，後輸入要安裝的插件：

•  ReactJS：支持React開發，代碼提示，高亮顯示
•  Emmet：前端開發必備
•  Terminal：在sublime中打開終端並定位到當前目錄
•  react-native-snippets：react native 的代碼片斷
•  JsFormat：格式化js代碼

其中要單獨設置的是JsFormat能夠設置爲保存時自動格式化，設置以下：打開preferences -> Package Settings -> JsFormat -> Setting - Users,輸入如下代碼：

1 2 3 4 5 6 7 8 9

{      "e4x": true,      // jsformat options      "format_on_save": true,   }

效果如圖：

Top 1：VS Code

1.下載地址：https://code.visualstudio.com/Download

2.添加RN開發插件

•  React Native Tools：微軟官方出的ReactNative插件,很是好用
•  Reactjs code snippets：react的代碼提示，如componentWillMount方法能夠經過cwm直接得到
•  Auto Close Tag：自動閉合標籤
•  Auto Rename Tag：自動重命名標籤，配合上面的插件使用，基本上能遇上IntelliJ IDEA系的功能了
•  Path Intellisense：文件路徑提示補全

3.經常使用快捷鍵&設置

Shift + Alt + F：格式化代碼

Ctrl + Space：代碼提示，與輸入快捷鍵衝突全部使用不了，可根據本身喜好自行設置，設置：文件 => 首選項 => 鍵盤快捷方式 => 搜索「space」=>修改成本身的快捷鍵，如圖：

 

4.配置VSCode調試ReactNative，擺脫手動輸入命令運行RN項目的苦惱

　　a).安裝「React Native Tools」插件；

　　b).點擊調試 => 增長配置 => 選擇「React Native:Debug Android」 => 插入代碼報錯，如圖：

保存，點擊調試按鈕，便可運行調試RN項目；

 

若是以爲有用，請點擊「推薦」按鈕，謝謝！