開發環境 windows

開發工具 visual studio code

node 安裝和 npm

windows 安裝node 可以直接在 node官網 直接下載直接當作普通軟體安裝即可。
安裝完成可http://www.cppcns.com以在控制檯中執行node測試是否安裝成功 win + r 輸入 cmd,直接在終端輸入node -v 輸出版本號及已經成功安裝。
目前新版本的node自帶npm(npm 是隨同 node 一起安裝的包管理工具)。這裡安裝好了 node並且測試安裝成功之後，可以繼續在控制檯輸入 npm -v 檢查是不是安裝成功。同樣成功會輸出版本號。

安裝 visual studio code

vs code 正常軟體安裝 沒有需要注意的,直接下載安裝

安裝React

參照文件React Tutorial in VS Code 文件已經很詳細 按照文件來一遍就基本上沒問題。

• 建立本地資料夾，即儲存專案的資料夾，在資料夾下開啟控制檯我這裡使用git bash直接在資料夾下右鍵找到git bash啟動即可
• 在控制檯輸入 npm install -g create-react-app 使用npm安裝 create-react-app
• 安裝完 create-react-app 之後 繼續輸入 create-react-app my-app 來建立一個專案 my-app
  是創建出來的 React 專案，等待一段時間(這裡需要下載一些依賴包)，即可看到建立完成的整個檔案結構
  

• 切換控制檯目錄到專案目錄下 執行 npm start 檢測當前專案是否建立成功 正常情況下當輸入命令之後 會直接開啟預設瀏覽器預覽 http://localhostqutVWXTrn:3000/ 此時會看到一個react的頁面
  

至此新建的React專案已經可以正常運行了
5.用VS Code 開啟專案資料夾，這裡可以看到整個檔案結構

所有檔案都可以直接使用VS Code直接修改。

安裝 Debugger for Chrome

1.VS Code 提供 Debugger for Chrome 外掛 可以支援使用chrome核心debug。

直接搜尋 安裝 之後重新載入一次VS Code
2.使用Debugger for Chrome 進行debug 需要對專案進行額外的配置

在此處設定啟動配置，文件原文中所說的會建立一個新的launch.on,我這裡已經存在一個launch.json檔案則直接在裡面新增配置即可，這裡有一個新增配置的按鈕可以直接新增配置節點 ，注意這裡有兩個chrome相關節點一個Launch 一個 Attach

建立完兩個節點 之後 找到 "request": "launch" 的一個節點裡面有一個url將這個url設定為之前 React 專案啟動的url，即 http://localhost:3000/ 另一個配置節點預設即可如有問題再做修改，修改後的全部配置如下：

{
    // 使用 IntelliSense 瞭解相關屬性。 
    // 懸停以檢視現有屬性的描述。
    // 欲瞭解更多資訊，請訪問: https://go.micrqutVWXTrnosoft.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",{
            "type": "node","name": "node","program": "${workspaceFolder}\\start"
        }
    ]
}

啟動專案npm start 然後開啟debug工具欄

選擇之前新增的 chrome 節點啟動 ，此時會開啟一個新的chrome頁面

在專案原始碼種找到index.js檔案打上斷點在行號前面點左鍵即可 之後重新整理頁面，則可進入端點

至此已經可以簡單進行除錯了。

安裝 eslint

eslint 是一個可組裝的Script和JSX檢查工具。可用於檢查語法錯誤規範程式碼。

• 在控制檯輸入 npm install -g eslint 安裝 eslint
• 在通過VS Code 安裝 eslint 外掛
  

3.開啟VS Code 的 命令面板 直接在檢視種找到或者 Ctrl+Shift+P 輸入ESLint 找到建立.eslintrc.json檔案的選項 此時專案根目錄下會建立一個配置檔案 此時你在專案中的一些語法錯誤會被自動檢測出來

參考文件中還有配置分號的規則，需要的可以新增。

到此這篇關於visual studio code + react 開發環境搭建的文章就介紹到這了,更多相關vscode react環境搭建內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！