在 Visual Studio Code 中使用 React

React 是一個由 Facebook 開發的熱門 JavaScript 程式庫，用於建置使用者介面。Visual Studio Code 編輯器開箱即用地支援 React.js IntelliSense 和程式碼導覽。

歡迎使用 React

在本教學課程中，我們將使用 create-react-app 產生器。若要使用產生器以及執行 React 應用程式伺服器，您需要安裝 Node.js JavaScript 執行階段環境和 npm (Node.js 套件管理員)。npm 包含在 Node.js 中，您可以從 Node.js 下載下載並安裝。

提示：若要測試您是否已在電腦上正確安裝 Node.js 和 npm，您可以在終端機或命令提示字元中輸入 node --version 和 npm --version。

您現在可以輸入以下命令來建立新的 React 應用程式

npx create-react-app my-app

其中 my-app 是您應用程式的資料夾名稱。這可能需要幾分鐘才能建立 React 應用程式並安裝其相依性。

注意：如果您先前已透過 npm install -g create-react-app 全域安裝 create-react-app，我們建議您使用 npm uninstall -g create-react-app 解除安裝套件，以確保 npx 始終使用最新版本。

讓我們快速執行 React 應用程式，方法是導覽至新資料夾並輸入 npm start 以啟動 Web 伺服器並在瀏覽器中開啟應用程式

cd my-app
npm start

您應該會在瀏覽器中的 https://127.0.0.1:3000 上看到 React 標誌和「Learn React」的連結。當我們在 VS Code 中查看應用程式時，我們將讓 Web 伺服器保持執行。

若要在 VS Code 中開啟您的 React 應用程式，請開啟另一個終端機或命令提示字元視窗，導覽至 my-app 資料夾並輸入 code .

cd my-app
code .

Markdown 預覽

在檔案總管中，您會看到一個檔案是應用程式 README.md Markdown 檔案。其中包含許多關於應用程式和 React 的一般資訊。檢閱 README 的好方法是使用 VS Code Markdown 預覽。您可以在目前的編輯器群組 (Markdown: 開啟預覽 ⇧⌘V (Windows、Linux Ctrl+Shift+V)) 或側邊的新編輯器群組 (Markdown: 在側邊開啟預覽 ⌘K V (Windows、Linux Ctrl+K V)) 中開啟預覽。您將獲得良好的格式設定、標題的超連結導覽，以及程式碼區塊中的語法醒目提示。

語法醒目提示和括號比對

現在展開 src 資料夾並選取 index.js 檔案。您會注意到 VS Code 對於各種原始碼元素具有語法醒目提示，如果您將游標放在括號上，也會選取相符的括號。

IntelliSense

當您開始在 index.js 中輸入時，您會看到智慧建議或完成項目。

在您選取建議並輸入 . 之後，您會透過 IntelliSense 看到物件上的類型和方法。

VS Code 使用 TypeScript 語言服務來取得其 JavaScript 程式碼智慧，並且具有稱為 自動類型取得 (ATA) 的功能。ATA 會為 package.json 中參考的 npm 模組提取 npm 類型宣告檔案 (*.d.ts)。

如果您選取方法，您也會取得參數說明

移至定義、查看定義

透過 TypeScript 語言服務，VS Code 也可以透過移至定義 (F12) 或查看定義 (⌥F12 (Windows Alt+F12、Linux Ctrl+Shift+F10)) 在編輯器中提供類型定義資訊。將游標放在 App 上，按一下滑鼠右鍵並選取查看定義。將開啟 查看視窗，顯示來自 App.js 的 App 定義。

按下 Escape 以關閉查看視窗。

Hello World

讓我們將範例應用程式更新為「Hello World!」。在 index.js 內建立名為 HelloWorld 的元件，其中包含具有「Hello, world!」的 H1 標題，並將 root.render 中的 <App /> 標籤取代為 <HelloWorld />。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

function HelloWorld() {
  return <h1 className="greeting">Hello, world!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <HelloWorld />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

儲存 index.js 檔案後，伺服器的執行個體將更新網頁，當您重新整理瀏覽器時，您會看到「Hello World!」。

提示：VS Code 支援自動儲存，預設會在延遲後儲存您的檔案。檢查檔案功能表中的自動儲存選項以開啟自動儲存，或直接設定 files.autoSave 使用者設定。

偵錯 React

若要偵錯用戶端 React 程式碼，我們將使用內建的 JavaScript 偵錯工具。

注意：本教學課程假設您已安裝 Edge 瀏覽器。如果您想要使用 Chrome 進行偵錯，請將啟動 type 取代為 chrome。也有適用於 Firefox 瀏覽器的偵錯工具。

設定中斷點

若要在 index.js 中設定中斷點，請按一下行號左側的邊界。這會設定一個中斷點，並顯示為紅色圓圈。

設定偵錯工具

我們需要先設定偵錯工具。若要執行此動作，請移至執行和偵錯檢視 (⇧⌘D (Windows、Linux Ctrl+Shift+D)) 並選取建立 launch.json 檔案連結以建立 launch.json 偵錯工具組態檔。從選取偵錯工具下拉式清單中選擇 Web 應用程式 (Edge)。這會在專案中新的 .vscode 資料夾中建立 launch.json 檔案，其中包含啟動網站的組態。

我們需要為我們的範例進行一項變更：將 url 的連接埠從 8080 變更為 3000。您的 launch.json 應該看起來像這樣

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "https://127.0.0.1:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

確認您的開發伺服器正在執行 (npm start)。然後按下 F5 或綠色箭頭以啟動偵錯工具並開啟新的瀏覽器執行個體。設定中斷點的原始碼會在偵錯工具附加之前在啟動時執行，因此在我們重新整理網頁之前，我們不會命中中斷點。重新整理頁面，您應該會命中您的中斷點。

您可以逐步執行您的原始碼 (F10)、檢查變數 (例如 HelloWorld)，並查看用戶端 React 應用程式的呼叫堆疊。

如需偵錯工具及其可用選項的詳細資訊，請查看我們關於瀏覽器偵錯的文件。

即時編輯和偵錯

如果您將 webpack 與您的 React 應用程式搭配使用，您可以利用 webpack 的 HMR 機制來獲得更有效率的工作流程，這可讓您直接從 VS Code 進行即時編輯和偵錯。您可以在這篇 直接從 VS Code 即時編輯和偵錯您的 React 應用程式 部落格文章和 webpack 熱模組取代文件中深入瞭解。

程式碼檢查

程式碼檢查器會分析您的原始碼，並在您執行應用程式之前警告您潛在的問題。VS Code 隨附的 JavaScript 語言服務預設具有語法錯誤檢查支援，您可以在問題面板 (檢視 > 問題 ⇧⌘M (Windows、Linux Ctrl+Shift+M)) 中看到實際運作情況。

嘗試在您的 React 原始碼中產生一個小錯誤，您會在問題面板中看到紅色波浪線和錯誤。

程式碼檢查器可以提供更複雜的分析、強制執行編碼慣例並偵測反模式。熱門的 JavaScript 程式碼檢查器是 ESLint。ESLint 與 ESLint VS Code 擴充功能 結合使用時，可提供絕佳的產品內程式碼檢查體驗。

首先，安裝 ESLint 命令列工具

npm install -g eslint

然後透過移至擴充功能檢視並輸入「eslint」來安裝 ESLint 擴充功能。

安裝 ESLint 擴充功能並重新載入 VS Code 後，您會想要建立 ESLint 組態檔 .eslintrc.js。您可以使用擴充功能的 ESLint: 建立 ESLint 組態 命令從命令面板 (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 建立一個。

命令會提示您在終端機面板中回答一系列問題。採用預設值，它會在您的專案根目錄中建立一個 .eslintrc.js 檔案，如下所示

module.exports = {
  env: {
    browser: true,
    es2020: true
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 11,
    sourceType: 'module'
  },
  plugins: ['react'],
  rules: {}
};

ESLint 現在將分析開啟的檔案，並在 index.js 中顯示關於已定義但從未使用過的 'App' 的警告。

您可以修改 .eslintrc.js 檔案中的 ESLint 規則。

讓我們為額外的分號新增一個錯誤規則

 "rules": {
        "no-extra-semi":"error"
    }

現在，當您錯誤地在一行上有多個分號時，您會在編輯器中看到錯誤 (紅色波浪線) 和問題面板中的錯誤項目。

熱門入門套件

在本教學課程中，我們使用 create-react-app 產生器來建立簡單的 React 應用程式。有許多很棒的範例和入門套件可協助您建置第一個 React 應用程式。

VS Code React 範例

這是一個 範例 React 應用程式，它會建立一個簡單的 TODO 應用程式，並包含 Node.js Express 伺服器的原始碼。它也示範如何使用 Babel ES6 轉譯器，然後使用 webpack 來組合網站資產。

TypeScript React

如果您對 TypeScript 和 React 感到好奇，您也可以透過指定您想要使用 TypeScript 範本來建立 create-react-app 應用程式的 TypeScript 版本

npx create-react-app my-app --template typescript

請參閱 新增 TypeScript，網址為 Create React App 網站。

Angular

Angular 是另一個熱門的 Web 架構。如果您想查看 Angular 與 VS Code 搭配使用的範例，請查看 使用 Angular CLI 偵錯 食譜。它將引導您完成建立 Angular 應用程式，以及設定 JavaScript 偵錯工具的 launch.json 檔案。

常見問題

我可以在宣告式 JSX 中取得 IntelliSense 嗎？

可以。例如，如果您開啟 create-react-app 專案的 App.js 檔案，您可以在 render() 方法中的 React JSX 內看到 IntelliSense。