轉自：https://blog.csdn.net/crazyhsf/article/details/81039059
開發環境 windows
開發工具 visual studio code
node 安裝和 npm
windows 安裝node 可以直接在 node官網 直接下載下傳直接當作普通軟體安裝即可。
安裝完成可以在控制台中運作node測試是否安裝成功 win + r 輸入 cmd ,直接在終端輸入node -v 輸出版本号及已經成功安裝。
目前新版本的node自帶npm(npm 是随同 node 一起安裝的包管理工具)。這裡安裝好了 node并且測試安裝成功之後，可以繼續在控制台輸入 npm -v 檢查是不是安裝成功。同樣成功會輸出版本号。
安裝 visual studio code
vs code 正常軟體安裝 沒有需要注意的,直接下載下傳安裝
安裝React
參照文檔 React JavaScript Tutorial in VS Code 文檔已經很詳細 按照文檔來一遍就基本上沒問題。
1. 建立本地檔案夾，即儲存項目的檔案夾，在檔案夾下打開控制台我這裡使用git bash直接在檔案夾下右鍵找到git bash啟動即可
2. 在控制台輸入 npm install -g create-react-app 使用npm安裝 create-react-app
3. 安裝完 create-react-app 之後 繼續輸入 create-react-app my-app 來建立一個項目 my-app 是建立出來的 React 項目，等待一段時間(這裡需要下載下傳一些依賴包)，即可看到建立完成的整個檔案結構
4. 切換控制台目錄到項目目錄下 運作 npm start 檢測目前項目是否建立成功 正常情況下當輸入指令之後 會直接打開預設浏覽器預覽 http://localhost:3000/ 此時會看到一個react的頁面
至此建立的React項目已經可以正常運作了
5.用VS Code 打開項目檔案夾，這裡可以看到整個檔案結構
所有檔案都可以直接使用VS Code直接修改。
安裝 Debugger for Chrome
VS Code 提供 Debugger for Chrome 插件 可以支援使用chrome核心debug。
直接搜尋 安裝 之後重新加載一次VS Code
2.使用Debugger for Chrome 進行debug 需要對項目進行額外的配置
在此處設定啟動配置，文檔原文中所說的會建立一個新的launch.json,我這裡已經存在一個launch.json檔案則直接在裡面添加配置即可，這裡有一個添加配置的按鈕可以直接添加配置節點 ，注意這裡有兩個chrome相關節點一個Launch 一個 Attach
建立完兩個節點 之後 找到 "request": "launch" 的一個節點裡面有一個url将這個url設定為之前 React 項目啟動的url，即 http://localhost:3000/ 另一個配置節點預設即可如有問題再做修改，修改後的全部配置如下：
{
// 使用 IntelliSense 了解相關屬性。
// 懸停以檢視現有屬性的描述。
// 欲了解更多資訊，請通路: 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"
}
]
}
啟動項目npm start 然後打開debug工具欄
選擇之前添加的 chrome 節點啟動 ，此時會打開一個新的chrome頁面
在項目源代碼種找到index.js檔案打上斷點在行号前面點左鍵即可 之後重新整理頁面，則可進入端點
至此已經可以簡單進行調試了。
安裝 eslint
eslint 是一個可組裝的JavaScript和JSX檢查工具。可用于檢查文法錯誤規範代碼。
1. 在控制台輸入 npm install -g eslint 安裝 eslint
2. 在通過VS Code 安裝 eslint 插件
3. 打開VS Code 的 指令面闆 直接在檢視種找到或者 Ctrl+Shift+P 輸入ESLint 找到建立.eslintrc.json檔案的選項 此時項目根目錄下會建立一個配置檔案 此時你在項目中的一些文法錯誤會被自動檢測出來
參考文檔中還有配置分号的規則，需要的可以添加。