在 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

您應該會在瀏覽器中看到 React 徽標以及 https://:3000 上的“Learn React”連結。在檢視 VS Code 中的應用程式時，我們將讓 Web 伺服器保持執行。

要將您的 React 應用程式開啟到 VS Code 中，請開啟另一個終端或命令提示符視窗，導航到 my-app 資料夾，然後鍵入 code .。

cd my-app
code .

Markdown 預覽

在檔案資源管理器中，您將看到應用程式的 README.md Markdown 檔案。其中包含有關應用程式和 React 的大量有用資訊。一個很好的方法是使用 VS Code 的 Markdown 預覽來檢視 README。您可以在當前編輯器組中（Markdown: Open Preview ⇧⌘V (Windows, Linux Ctrl+Shift+V)）或在右側的新編輯器組中（Markdown: Open Preview to the Side ⌘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 上，右鍵單擊並選擇 **Peek Definition**。將開啟一個 Peek 視窗，顯示來自 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)），然後選擇 **create a launch.json file** 連結以建立 launch.json 偵錯程式配置檔案。從 **Select debugger** 下拉列表中選擇 **Web App (Edge)**。這將建立一個 launch.json 檔案，位於專案中的新 .vscode 資料夾內，其中包含啟動網站的配置。

我們需要為我們的示例做一個更改：將 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 應用程式的呼叫堆疊。

有關偵錯程式及其可用選項的更多資訊，請檢視我們關於 瀏覽器除錯的文件。

即時編輯和除錯

如果您正在使用 webpack 與您的 React 應用程式配合使用，您可以透過利用 webpack 的 HMR 機制來實現更高效的工作流程，該機制使您可以直接從 VS Code 進行即時編輯和除錯。您可以在這篇 直接從 VS Code 即時編輯和除錯您的 React 應用程式，無需離開編輯器的博文中以及 webpack 熱模組替換文件中瞭解更多資訊。

程式碼檢查

Linter 會分析您的原始碼，並可以在您執行應用程式之前警告您潛在的問題。VS Code 隨附的 JavaScript 語言服務預設支援語法錯誤檢查，您可以在 **Problems** 面板（**View** > **Problems** ⇧⌘M (Windows, Linux Ctrl+Shift+M)）中看到這一點。

嘗試在您的 React 原始碼中引入一個小錯誤，您將在 **Problems** 面板中看到一個紅色的波浪線和一個錯誤。

Linter 可以提供更復雜的分析，強制執行編碼約定並檢測反模式。一個流行的 JavaScript linter 是 ESLint。ESLint 與 ESLint VS Code 擴充套件結合使用時，可在產品內部提供出色的 linting 體驗。

首先，安裝 ESLint 命令列工具

npm install -g eslint

然後，透過轉到 **Extensions** 檢視並鍵入“eslint”來安裝 ESLint 擴充套件。

安裝 ESLint 擴充套件並重新載入 VS Code 後，您需要建立一個 ESLint 配置檔案 .eslintrc.js。您可以使用擴充套件的 **ESLint: Create ESLint configuration** 命令從 **Command Palette**（⇧⌘P (Windows, Linux Ctrl+Shift+P)）建立它。

該命令將提示您在 **Terminal** 面板中回答一系列問題。使用預設值，它將在您的專案根目錄下建立一個 .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"
    }

現在，當您錯誤地在一行中有多個分號時，您將在編輯器中看到一個錯誤（紅色波浪線），並在 **Problems** 面板中看到一個錯誤條目。

熱門入門套件

在本教程中，我們使用了 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。