在 Visual Studio Code 中使用 React

React 是一个流行的 JavaScript 库，由 Facebook 开发，用于构建用户界面。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 徽标和指向“了解 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

请参阅 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。