ReactNative開發工具有這一篇足矣
https://www.cnblogs.com/vipstone/p/7125338.html
ReactNative系列文章:
正文
React Native(以下簡稱RN)開發工具的文章很多,幾乎千篇一律都是Copy的(一毛一樣),本文結合自己的實踐經歷,推薦給Coder最實用的RN開發工具,RN開發工具用這一篇足矣!
概述:開發RN的工具有很多,選擇性也比較多,比如Facebook專門為React開發的IDE:Nuclide,還有做前端比較熟悉的WebStorm、Sublime Text 3、VS Code等。
面對這些IDE我們應該怎麼選擇的呢?先說不推薦IDE排行榜:
Top1:Nuclide雖然是Facebook專門為React開發的,但依託於Atom的Nuclide真是慢的出奇,效能低到無法讓人忍受,如果你覺得自己是一個好性子,不妨驗證一番。
Top2:WebStorm這個工具對於我來說是非常熟悉的IDE從幾年前開始開發NodeJs一來一直使用的此IDE,他的缺點是慢、卡、容易崩潰,而且是收費的,雖然可以破解但對於沒有用過的人來說,門檻也不低,但重要的是它的不穩定性崩潰和載入啟動的速度著實讓人不滿意。
說完了不推薦使用的IDE,下來說說咱們的重點推薦IDE排行榜:
Top 2:Sublime Text 3
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專案;
如果覺得有用,請點選“推薦”按鈕,謝謝!