react-native 的js開發工具選擇之VSCode
前言
從網上翻閱了一些開發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項目;