vscode搭配react-native開發環境

前言

從網上翻閱了一些開發react-native的開發工具時,發現可選的工具還是非常多,比如前端大家非常熟悉的Sublime Text,WebStrom,Atom+Nuclide,vs code 等;還有Facebook專門爲React開發的IDE:Nuclide
那麼面對這麼多開發工具我們到底應該怎麼選擇呢?

查閱一些相關資料後,總結不推薦的工具

Top1:IDE:Nuclide

IDE:Nuclide雖然是Facebook專門爲React開發的,但依託於Atom的Nuclide真是慢的出奇,性能低到無法讓人忍受,如果你覺得自己是一個好性子,不妨驗證一番。

Top2:WebStorm

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

推薦的工具

VS Code開發RN環境配置

因爲我用VS Code開發過vue.js,自我體驗還是很滿意的,所以在學習rn的js編寫中,首選的也是VS Code

1、下載安裝VS Code

在VS Code官網下載自己需要的版本,然後安裝,其具體步驟我就不在這幾細寫了,不懂的可以自己去百度

2、添加RN開發需要的插件

安裝vs code成功後打開工具,安裝RN開發需要的插件,我使用的有如下幾個:
React Native Tools:微軟官方出的ReactNative插件,非常好用
Reactjs code snippets:react的代碼提示,如componentWillMount方法可以通過cwm直接獲得
Auto Close Tag:自動閉合標籤
Auto Rename Tag:自動重命名標籤,配合上面的插件使用,基本上能趕上IntelliJ IDEA系的功能了
Path Intellisense:文件路徑提示補全
ESLint :代碼檢查的插件,一定要有,很不錯.
Dash :在線文檔
Babel ES6/ES7 :ES6,ES7語法加亮檢查插件
Typings auto installer :根據package.json 自動加載依賴
安裝方式如下圖:在這裏插入圖片描述

3、常用快捷鍵設置

文件 => 首選項 => 鍵盤快捷方式 => 搜索“space”=>修改爲自己的快捷鍵,
如圖:
在這裏插入圖片描述

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

點擊調試 => 增加配置 => 選擇“React Native:Debug Android” => 插入代碼報錯,如圖:
在這裏插入圖片描述
保存,點擊調試===》啓動調試,即可運行調試RN項目;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章