在 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://: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 还可以在编辑器中提供类型定义信息，方法是使用转到定义（Go to Definition，F12）或查看定义（Peek Definition，⌥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 中设置断点，请单击行号左侧的槽位。这将设置一个断点，并显示为一个红点。

配置调试器

我们需要首先配置调试器。为此，请转到运行和调试（Run and Debug）视图（⇧⌘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 应用的调用堆栈。

有关调试器及其可用选项的更多信息，请查阅我们的浏览器调试文档。

实时编辑和调试

如果您正在将 webpack 与 React 应用一起使用，可以通过利用 webpack 的 HMR 机制来实现更高效的工作流，从而能够直接在 VS Code 中进行实时编辑和调试。您可以在此篇直接在 VS Code 中实时编辑和调试您的 React 应用博文以及 webpack 热模块替换文档中了解更多信息。

代码检查

Lint 工具可以分析您的源代码，并在您运行应用之前警告潜在问题。VS Code 中包含的 JavaScript 语言服务默认支持语法错误检查，您可以在问题（Problems）面板中看到其实际效果（视图 > 问题 ⇧⌘M (Windows, Linux Ctrl+Shift+M)）。

尝试在您的 React 源代码中制造一个小错误，您会在编辑器中看到红色波浪线，并在问题面板中看到一个错误提示。

Lint 工具可以提供更复杂的分析，强制执行编码规范并检测反模式。一个流行的 JavaScript Lint 工具是 ESLint。当 ESLint 与 ESLint VS Code 扩展结合使用时，可以提供极佳的产品内 Lint 体验。

首先，安装 ESLint 命令行工具

npm install -g eslint

然后通过转到扩展（Extensions）视图并输入 '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 网站上的 Adding TypeScript。

Angular

Angular 是另一个流行的 Web 框架。如果您想查看 Angular 在 VS Code 中运行的示例，请查看 Debugging with Angular CLI 教程。它将引导您完成创建 Angular 应用并为 JavaScript 调试器配置 launch.json 文件的过程。

常见问题

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

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