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

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

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

node 安裝和 npm

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

安裝 visual studio code

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

安裝React

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

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

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

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

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

安裝 Debugger for Chrome

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

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

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

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

{
    // 使用 IntelliSense 了解相關(guān)屬性。 
    // 懸停以查看現有屬性的描述。
    // 欲了解更多信息，請訪(fǎng)問(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)項目npm start 然后打開(kāi)debug工具欄

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

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

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

安裝 eslint

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

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

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

參考文檔中還有配置分號的規則，需要的可以添加。

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