在 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://: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: 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 上，右鍵單擊並選擇速覽定義。一個速覽視窗將會開啟，顯示來自 App.js 的 App 定義。

按 Escape 關閉速覽視窗。

Hello World

讓我們把示例應用更新為“Hello World!”。在 index.js 中建立一個名為 HelloWorld 的元件，它包含一個 H1 標題，內容為“Hello, world!”，然後將 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://:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

確保你的開發伺服器正在執行（npm start）。然後按 F5 或綠色箭頭來啟動偵錯程式並開啟一個新的瀏覽器例項。設定了斷點的原始碼在偵錯程式附加之前就在啟動時運行了，所以我們重新整理網頁後才會命中該斷點。重新整理頁面，你應該會命中你的斷點。

你可以單步除錯你的原始碼（F10），檢查像 HelloWorld 這樣的變數，並檢視客戶端 React 應用程式的呼叫堆疊。

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

即時編輯和除錯

如果你將 webpack 與你的 React 應用一起使用，你可以利用 webpack 的 HMR 機制來獲得更高效的工作流，這使你能夠直接在 VS Code 中進行即時編輯和除錯。你可以在這篇直接從 VS Code 即時編輯和除錯你的 React 應用的博文和 webpack 熱模組替換文件中瞭解更多資訊。

程式碼檢查

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

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

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

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

npm install -g eslint

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

一旦 ESLint 擴充套件安裝完畢並重新載入 VS Code，你會想要建立一個 ESLint 配置檔案 .eslintrc.js。你可以使用擴充套件的ESLint: Create ESLint configuration命令從命令面板（⇧⌘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 模板來建立一個 TypeScript 版本的 create-react-app 應用程式：

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

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

Angular

Angular 是另一個流行的 Web 框架。如果你想看一個 Angular 與 VS Code 協同工作的示例，請檢視使用 Angular CLI 進行除錯的指南。它將引導你建立一個 Angular 應用程式併為 JavaScript 偵錯程式配置 launch.json 檔案。

常見問題

我可以在宣告式 JSX 中獲得智慧感知嗎？

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