天天看點

visual studio code + react 開發環境搭建

轉自: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 項目,等待一段時間(這裡需要下載下傳一些依賴包),即可看到建立完成的整個檔案結構 

visual studio code + react 開發環境搭建

4. 切換控制台目錄到項目目錄下 運作 npm start 檢測目前項目是否建立成功 正常情況下當輸入指令之後 會直接打開預設浏覽器預覽 http://localhost:3000/ 此時會看到一個react的頁面 

visual studio code + react 開發環境搭建

至此建立的React項目已經可以正常運作了 

5.用VS Code 打開項目檔案夾,這裡可以看到整個檔案結構

visual studio code + react 開發環境搭建

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

安裝 Debugger for Chrome

VS Code 提供 Debugger for Chrome 插件 可以支援使用chrome核心debug。 

visual studio code + react 開發環境搭建

直接搜尋 安裝 之後重新加載一次VS Code 

2.使用Debugger for Chrome 進行debug 需要對項目進行額外的配置 

visual studio code + react 開發環境搭建

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

visual studio code + react 開發環境搭建

建立完兩個節點 之後 找到 "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工具欄 

visual studio code + react 開發環境搭建

選擇之前添加的 chrome 節點啟動 ,此時會打開一個新的chrome頁面

在項目源代碼種找到index.js檔案打上斷點在行号前面點左鍵即可 之後重新整理頁面,則可進入端點 

visual studio code + react 開發環境搭建

至此已經可以簡單進行調試了。

安裝 eslint

eslint 是一個可組裝的JavaScript和JSX檢查工具。可用于檢查文法錯誤規範代碼。 

1. 在控制台輸入 npm install -g eslint 安裝 eslint 

2. 在通過VS Code 安裝 eslint 插件 

visual studio code + react 開發環境搭建

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

visual studio code + react 開發環境搭建

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

繼續閱讀