在 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 以啟動網頁伺服器，並在瀏覽器中開啟該應用程式。

cd my-app
npm start

您應該會在瀏覽器的 https://:3000 上看到 React 標誌以及「Learn React」的連結。在我們使用 VS Code 查看應用程式時，請讓網頁伺服器保持運作。

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

cd my-app
code .

Markdown 預覽

在檔案總管中，您會看到一個名為 README.md 的 Markdown 檔案。此檔案包含關於應用程式與 React 的許多重要資訊。檢視 README 的一個好方法是使用 VS Code 的 Markdown 預覽功能。您可以在目前的編輯器群組中開啟預覽（Markdown: Open Preview ），或在旁邊的新編輯器群組中開啟（Markdown: Open Preview to the Side ）。您將獲得美觀的格式化效果、標題的超連結導覽，以及程式碼區塊的語法高亮顯示。

語法高亮與括號配對

現在展開 src 資料夾並選取 index.js 檔案。您會注意到 VS Code 對各種原始程式碼元素都有語法高亮顯示；如果將游標放在括號上，配對的括號也會被選取。

IntelliSense

當您開始在 index.js 中輸入時，您會看到智慧建議或補全功能。

在您選取建議並輸入 . 後，透過 IntelliSense，您可以看到該物件上的型別與方法。

VS Code 使用 TypeScript 語言服務來提供 JavaScript 程式碼智慧功能，並具備一項稱為自動型別取得 (ATA) 的功能。ATA 會自動下載 package.json 中所參照 npm 模組的 npm 型別宣告檔案 (*.d.ts)。

如果您選取了一個方法，還會獲得參數說明。

前往定義 (Go to Definition)、預覽定義 (Peek definition)

透過 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 支援自動儲存 (Auto Save)，預設會在延遲一段時間後自動儲存檔案。勾選檔案選單中的自動儲存選項即可開啟此功能，或者直接設定 files.autoSave 使用者設定。

除錯 React

若要對用戶端 React 程式碼進行除錯，我們將使用內建的 JavaScript 除錯器。

注意：本教學假設您已安裝 Edge 瀏覽器。如果您想使用 Chrome 進行除錯，請將啟動設定中的 type 替換為 chrome。此外也有適用於 Firefox 瀏覽器的除錯器。

設定中斷點

若要在 index.js 中設定中斷點，請點擊行號左側的裝訂邊。這將會設定一個中斷點，並以紅色圓圈顯示。

設定除錯器

我們需要先設定除錯器。請前往執行與除錯檢視 (⇧⌘D (Windows, Linux Ctrl+Shift+D))，並選取建立 launch.json 檔案連結以建立 launch.json 除錯設定檔。從選取除錯器下拉清單中選擇Web App (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://:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

確保您的開發伺服器正在執行 (npm start)。接著按下 F5 或綠色箭頭以啟動除錯器並開啟新的瀏覽器實例。由於設定中斷點的原始程式碼在啟動時執行，早於除錯器的掛載時間，因此在重新整理網頁前，我們不會觸發中斷點。請重新整理頁面，您應該就能觸發中斷點。

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

關於除錯器及其可用選項的更多資訊，請查看我們關於瀏覽器除錯的說明文件。

即時編輯與除錯

如果您在 React 應用程式中使用 webpack，可以利用 webpack 的 HMR 機制來獲得更高效的工作流程，這使您能夠直接從 VS Code 進行即時編輯與除錯。您可以在這篇部落格文章從 VS Code 直接即時編輯與除錯您的 React 應用程式以及 webpack 熱模組替換說明文件中了解更多資訊。

Linting

程式碼檢查工具 (Linters) 會分析您的原始程式碼，並在執行應用程式前向您發出潛在問題警告。VS Code 內建的 JavaScript 語言服務預設支援語法錯誤檢查，您可以在問題面板中看到運作情形（檢視 > 問題 ⇧⌘M (Windows, Linux Ctrl+Shift+M)）。

嘗試在您的 React 原始程式碼中製造一個小錯誤，您就會看到紅色波浪線以及問題面板中的錯誤資訊。

程式碼檢查工具可以提供更複雜的分析，強制執行編碼規範並偵測反模式。一個熱門的 JavaScript 程式碼檢查工具是 ESLint。當 ESLint 結合 VS Code 的 ESLint 擴充功能時，能提供極佳的產品內檢查體驗。

首先，安裝 ESLint 命令列工具：

npm install -g eslint

接著，前往延伸模組檢視並輸入 'eslint' 來安裝 ESLint 擴充功能。

一旦安裝完 ESLint 擴充功能並重新載入 VS Code 後，您將需要建立一個 ESLint 設定檔 .eslintrc.js。您可以使用命令選擇區 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 中的ESLint: Create ESLint configuration 命令來建立。

該命令會提示您在終端機面板中回答一系列問題。採用預設值，它將在您的專案根目錄中建立一個類似下方的 .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

詳情請參閱 Create React App 網站上的新增 TypeScript。

Angular

Angular 是另一個熱門的網頁框架。如果您想看看 Angular 在 VS Code 中運作的範例，請查看 使用 Angular CLI 進行除錯的配方。它將引導您建立一個 Angular 應用程式，並為 JavaScript 除錯器設定 launch.json 檔案。

常見問題

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

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