在 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 始终使用最新版本。

让我们通过导航到新文件夹并键入 npm start 来快速运行我们的 React 应用程序，以启动 Web 服务器并在浏览器中打开应用程序

cd my-app
npm start

您应该在浏览器中的 https://127.0.0.1:3000 上看到 React 徽标和指向“Learn React”的链接。我们将保持 Web 服务器运行，同时使用 VS Code 查看应用程序。

要在 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 热模块替换文档中了解更多信息。

代码检查

Linters 分析您的源代码，并可以在您运行应用程序之前警告您潜在的问题。VS Code 随附的 JavaScript 语言服务默认情况下具有语法错误检查支持，您可以在 问题 面板（查看 > 问题 ⇧⌘M (Windows, Linux Ctrl+Shift+M)）中看到它的实际效果。

尝试在您的 React 源代码中做一个小错误，您将在 问题 面板中看到红色波浪线和错误。

Linters 可以提供更复杂的分析，强制执行编码约定并检测反模式。流行的 JavaScript linter 是 ESLint。ESLint 与 ESLint VS Code 扩展 结合使用时，可提供出色的产品内 linting 体验。

首先，安装 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

有关详细信息，请参阅 在 Create React App 站点上添加 TypeScript。

Angular

Angular 是另一个流行的 Web 框架。如果您想查看 Angular 与 VS Code 一起工作的示例，请查看 使用 Angular CLI 调试 食谱。它将引导您完成创建 Angular 应用程序并为 JavaScript 调试器配置 launch.json 文件的过程。

常见问题

我可以在声明式 JSX 中获得 IntelliSense 吗？

可以。例如，如果您打开 create-react-app 项目的 App.js 文件，您可以在 render() 方法中的 React JSX 中看到 IntelliSense。