在 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

您应该在浏览器中看到 React 徽标和指向 "http://localhost:3000" 上 "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：打开预览 ⇧⌘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 关闭查看窗口。

你好世界

让我们将示例应用程序更新为 "你好世界！"。在 index.js 中创建一个名为 HelloWorld 的组件，其中包含一个带有 "你好世界！" 的 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 文件后，正在运行的服务器实例将更新网页，当您刷新浏览器时，您会看到 "你好世界！"。

提示：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": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

确保您的开发服务器正在运行 (npm start)。然后按 F5 或绿色箭头启动调试器并打开一个新的浏览器实例。设置断点的源代码在调试器附加之前在启动时运行，因此在刷新网页之前不会命中该断点。刷新页面，您应该会命中您的断点。

您可以单步执行源代码 (F10)，检查诸如 HelloWorld 等变量，并查看客户端 React 应用程序的调用堆栈。

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

实时编辑和调试

如果您将 webpack 与 React 应用程序一起使用，您可以利用 webpack 的 HMR 机制来获得更高效的工作流，该机制使您可以直接从 VS Code 进行实时编辑和调试。您可以在这篇直接从 VS Code 实时编辑和调试您的 React 应用程序博客文章和 webpack 热模块替换文档 中了解更多信息。

规范检查 (Linting)

Linting 工具分析您的源代码，并在您运行应用程序之前警告您潜在的问题。VS Code 随附的 JavaScript 语言服务默认支持语法错误检查，您可以在问题面板（视图 > 问题 ⇧⌘M（Windows、Linux Ctrl+Shift+M））中看到其作用。

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

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

首先，安装 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 模板来创建 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。