快捷導(dǎo)航

基于visual studio code + react 開(kāi)發(fā)環(huán)境搭建過(guò)程

更新時(shí)間：2021年07月07日 11:55:18 作者：CrazyHSF

今天通過(guò)本文給大家分享基于visual studio code + react 開(kāi)發(fā)環(huán)境搭建過(guò)程，本文給大家介紹的非常詳細(xì)，包括react安裝問(wèn)題及安裝 Debugger for Chrome的方法，需要的朋友跟隨小編一起看看吧

開(kāi)發(fā)環(huán)境 windows

開(kāi)發(fā)工具 visual studio code

node 安裝和 npm

windows 安裝node 可以直接在 node官網(wǎng) 直接下載直接當(dāng)作普通軟件安裝即可。
安裝完成可以在控制臺(tái)中運(yùn)行node測(cè)試是否安裝成功 win + r 輸入 cmd ,直接在終端輸入node -v 輸出版本號(hào)及已經(jīng)成功安裝。
目前新版本的node自帶npm(npm 是隨同 node 一起安裝的包管理工具)。這里安裝好了 node并且測(cè)試安裝成功之后，可以繼續(xù)在控制臺(tái)輸入 npm -v 檢查是不是安裝成功。同樣成功會(huì)輸出版本號(hào)。

安裝 visual studio code

vs code 正常軟件安裝沒(méi)有需要注意的,直接下載安裝

安裝React

參照文檔React JavaScript Tutorial in VS Code 文檔已經(jīng)很詳細(xì) 按照文檔來(lái)一遍就基本上沒(méi)問(wèn)題。

創(chuàng)建本地文件夾，即保存項(xiàng)目的文件夾，在文件夾下打開(kāi)控制臺(tái)我這里使用git bash直接在文件夾下右鍵找到git bash啟動(dòng)即可
在控制臺(tái)輸入 npm install -g create-react-app 使用npm安裝 create-react-app
安裝完 create-react-app 之后繼續(xù)輸入 create-react-app my-app 來(lái)創(chuàng)建一個(gè)項(xiàng)目 my-app 是創(chuàng)建出來(lái)的 React 項(xiàng)目，等待一段時(shí)間(這里需要下載一些依賴包)，即可看到創(chuàng)建完成的整個(gè)文件結(jié)構(gòu)

切換控制臺(tái)目錄到項(xiàng)目目錄下運(yùn)行 npm start 檢測(cè)當(dāng)前項(xiàng)目是否創(chuàng)建成功正常情況下當(dāng)輸入命令之后會(huì)直接打開(kāi)默認(rèn)瀏覽器預(yù)覽 http://localhost:3000/ 此時(shí)會(huì)看到一個(gè)react的頁(yè)面

至此新建的React項(xiàng)目已經(jīng)可以正常運(yùn)行了
5.用VS Code 打開(kāi)項(xiàng)目文件夾，這里可以看到整個(gè)文件結(jié)構(gòu)

所有文件都可以直接使用VS Code直接修改。

安裝 Debugger for Chrome

1.VS Code 提供 Debugger for Chrome 插件可以支持使用chrome內(nèi)核debug。

直接搜索安裝之后重新加載一次VS Code
2.使用Debugger for Chrome 進(jìn)行debug 需要對(duì)項(xiàng)目進(jìn)行額外的配置

在此處設(shè)置啟動(dòng)配置，文檔原文中所說(shuō)的會(huì)創(chuàng)建一個(gè)新的launch.json,我這里已經(jīng)存在一個(gè)launch.json文件則直接在里面添加配置即可，這里有一個(gè)添加配置的按鈕可以直接添加配置節(jié)點(diǎn) ，注意這里有兩個(gè)chrome相關(guān)節(jié)點(diǎn)一個(gè)Launch 一個(gè) Attach

創(chuàng)建完兩個(gè)節(jié)點(diǎn) 之后找到 "request": "launch" 的一個(gè)節(jié)點(diǎn)里面有一個(gè)url將這個(gè)url設(shè)置為之前 React 項(xiàng)目啟動(dòng)的url，即 http://localhost:3000/ 另一個(gè)配置節(jié)點(diǎn)默認(rèn)即可如有問(wèn)題再做修改，修改后的全部配置如下：

{
    // 使用 IntelliSense 了解相關(guān)屬性。 
    // 懸停以查看現(xiàn)有屬性的描述。
    // 欲了解更多信息，請(qǐng)?jiān)L問(wèn): https://go.microsoft.com/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"
        }
    ]
}

啟動(dòng)項(xiàng)目npm start 然后打開(kāi)debug工具欄

選擇之前添加的 chrome 節(jié)點(diǎn)啟動(dòng) ，此時(shí)會(huì)打開(kāi)一個(gè)新的chrome頁(yè)面

在項(xiàng)目源代碼種找到index.js文件打上斷點(diǎn)在行號(hào)前面點(diǎn)左鍵即可之后刷新頁(yè)面，則可進(jìn)入端點(diǎn)

至此已經(jīng)可以簡(jiǎn)單進(jìn)行調(diào)試了。

安裝 eslint

eslint 是一個(gè)可組裝的JavaScript和JSX檢查工具?？捎糜跈z查語(yǔ)法錯(cuò)誤規(guī)范代碼。

在控制臺(tái)輸入 npm install -g eslint 安裝 eslint
在通過(guò)VS Code 安裝 eslint 插件

3.打開(kāi)VS Code 的命令面板直接在查看種找到或者 Ctrl+Shift+P 輸入ESLint 找到創(chuàng)建.eslintrc.json文件的選項(xiàng) 此時(shí)項(xiàng)目根目錄下會(huì)創(chuàng)建一個(gè)配置文件此時(shí)你在項(xiàng)目中的一些語(yǔ)法錯(cuò)誤會(huì)被自動(dòng)檢測(cè)出來(lái)

參考文檔中還有配置分號(hào)的規(guī)則，需要的可以添加。

到此這篇關(guān)于visual studio code + react 開(kāi)發(fā)環(huán)境搭建的文章就介紹到這了,更多相關(guān)vscode react環(huán)境搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: