【移動應用開發(fā)技術(shù)】基于visual studio code+react開發(fā)環(huán)境搭建的方法

【移動應用開發(fā)技術(shù)】基于visualstudiocode+react開發(fā)環(huán)境搭建的方法

這篇“基于visualstudiocode+react開發(fā)環(huán)境搭建的方法”文章的知識點大部分人都不太理解，所以在下給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“基于visualstudiocode+react開發(fā)環(huán)境搭建的方法”文章吧。開發(fā)環(huán)境windows開發(fā)工具visualstudiocodewindows安裝node可以直接在node官網(wǎng)直接下載直接當作普通軟件安裝即可。安裝完成可以在控制臺中運行node測試是否安裝成功win+r輸入

cmd

,直接在終端輸入node-v

輸出版本號及已經(jīng)成功安裝。目前新版本的node自帶npm(npm是隨同node一起安裝的包管理工具)。這里安裝好了node并且測試安裝成功之后，可以繼續(xù)在控制臺輸入

npm-v

檢查是不是安裝成功。同樣成功會輸出版本號。vscode正常軟件安裝沒有需要注意的,直接下載安裝參照文檔ReactJavaScriptTutorialinVSCode文檔已經(jīng)很詳細按照文檔來一遍就基本上沒問題。創(chuàng)建本地文件夾，即保存項目的文件夾，在文件夾下打開控制臺我這里使用gitbash直接在文件夾下右鍵找到gitbash啟動即可在控制臺輸入

npminstall-gcreate-react-app

使用npm安裝create-react-app安裝完create-react-app之后繼續(xù)輸入

create-react-appmy-app

來創(chuàng)建一個項目

my-app

是創(chuàng)建出來的React項目，等待一段時間(這里需要下載一些依賴包)，即可看到創(chuàng)建完成的整個文件結(jié)構(gòu)切換控制臺目錄到項目目錄下運行

npmstart

檢測當前項目是否創(chuàng)建成功正常情況下當輸入命令之后會直接打開默認瀏覽器預覽http://localhost:3000/此時會看到一個react的頁面至此新建的React項目已經(jīng)可以正常運行了5.用VSCode打開項目文件夾，這里可以看到整個文件結(jié)構(gòu)所有文件都可以直接使用VSCode直接修改。1.VSCode提供DebuggerforChrome插件可以支持使用chrome內(nèi)核debug。直接搜索安裝之后重新加載一次VSCode2.使用DebuggerforChrome進行debug需要對項目進行額外的配置在此處設置啟動配置，文檔原文中所說的會創(chuàng)建一個新的launch.json,我這里已經(jīng)存在一個launch.json文件則直接在里面添加配置即可，這里有一個添加配置的按鈕可以直接添加配置節(jié)點，注意這里有兩個chrome相關(guān)節(jié)點一個Launch一個Attach創(chuàng)建完兩個節(jié)點之后找到

"request":"launch"

的一個節(jié)點里面有一個url將這個url設置為之前React項目啟動的url，即

http://localhost:3000/

另一個配置節(jié)點默認即可如有問題再做修改，修改后的全部配置如下：{

//

使用

IntelliSense

了解相關(guān)屬性。

//

懸停以查看現(xiàn)有屬性的描述。

//

欲了解更多信息，請訪問:

/fwlink/?linkid=830387

"version":

"0.2.0",

"configurations":

[

{

"type":

"chrome",

"request":

"attach",

"name":

"Attach

to

Chrome",

"port":

9222,

"webRoot":

"${workspaceFolder}"

},

{

"type":

"chrome",

"request":

"launch",

"name":

"chrome",

"url":

"http://localhost:3000",

"webRoot":

"${workspaceFolder}"

},

{

"type":

"node",

"request":

"launch",

"name":

"node",

"program":

"${workspaceFolder}start"

}

]

}啟動項目npmstart

然后打開debug工具欄選擇之前添加的chrome節(jié)點啟動，此時會打開一個新的chrome頁面在項目源代碼種找到index.js文件打上斷點在行號前面點左鍵即可之后刷新頁面，則可進入端點至此已經(jīng)可以簡單進行調(diào)試了。eslint是一個可組裝的JavaScript和JSX檢查工具?？捎糜跈z查語法錯誤規(guī)范代碼。在控制臺輸入

npminstall-geslint

安裝eslint在通過VSCode安裝eslin