本站点文档内容均翻译自code.visualstudio.com，仅供个人学习，如有差异请以官网为准。

在Visual Studio Code中使用React

React 是由 Facebook 开发的一个流行的 JavaScript 库，用于构建用户界面。Visual Studio Code 编辑器开箱即用就支持 React.js 智能感知和代码导航。

欢迎来到React

欢迎来到React

我们将使用生成器进行本教程。要使用生成器并运行React应用服务器，您需要Node.jsJavaScript运行时和npm（Node.js包管理器）已安装。npm包含在Node.js中，您可以从Node.js下载下载并安装。创建 react 应用程序

提示：要测试你是否在机器上正确安装了Node.js和npm，你可以在终端或命令提示符中键入节点 --版本和npm --版本。

您现在可以输入以下内容来创建一个新的 React 应用程序：

npx create-react-app my-app

其中 我的应用 是你的应用程序的文件夹名称。这可能需要几分钟来创建 React 应用程序并安装其依赖项。

注意：如果您之前通过创建 react 应用程序全局安装了npm install -g create-react-app，我们建议您使用npm 卸载 -g create-react-app卸载该包，以确保 npx 始终使用最新版本。

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

cd my-app
npm 启动

你应该在http://localhost:3000中看到React的标志和“学习React”的链接。在我们用VS Code查看应用程序时，我们会让网页服务器继续运行。

要打开你的 React 应用程序，请打开另一个终端或命令提示符Windows，导航到 我的应用 文件夹并输入 代码：

cd my-app
代码 .

Markdown 预览

在文件资源管理器中，你会看到一个应用文件，即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)）。你将获得良好的格式化、标题的超链接导航以及代码块中的语法高亮。自述文件.md

自述文件 Markdown 预览

语法高亮和括号匹配

现在展开源文件夹并选择index.js文件。你会发现VS Code对各种源代码元素有语法高亮显示，如果你将光标放在括号上，匹配的括号也会被选中。

反应括号匹配

智能感知

当你开始在index.js中输入时，你会看到智能建议或完成。

React 智能感知建议

在你选择一个建议并输入输入：.后，你会通过IntelliSense看到该对象的类型和方法。

React 智能感知

VS Code 使用 TypeScript 语言服务来实现其 JavaScript 代码智能，并且它有一个名为自动类型获取 (ATA) 的功能。ATA 会拉取在中引用的 npm 模块的 npm Type Declaration 文件 (*.d.ts)。package.json

如果您选择一种方法，您还会获得参数帮助：

React参数帮助

转到定义，查看定义

通过 TypeScript 语言服务，VS Code 也可以在编辑器中通过 转到定义 (F12) 或 预览定义 (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)) 提供类型定义信息。将光标放在 应用程序 上，右键单击并选择 预览定义。一个 预览Windows 将打开，显示 应用程序 的定义 App.js。

React 查看定义

按 Escape 键关闭预览Windows。

Hello World

让我们将示例应用程序更新为 "Hello World!"。在 index.js 中创建一个名为 Hello World 的组件，该组件包含一个带有 "Hello, world!" 的 H1 标题，并将 <应用程序 /> 标签在 根渲染 中替换为 <Hello World />。

```plaintext
导入 React 从 'react';
导入 ReactDOM 从 'react-dom/client';
导入 './index.css';
导入 App 从 './App';
导入 reportWebVitals 从 './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用户设置。

Hello World

调试 React

要调试客户端的 React 代码，我们将使用内置的 JavaScript 调试器。

注意：此教程假定您已安装 Edge 浏览器。如果您想使用 Chrome 进行调试，请将 launch type 替换为 chrome。对于 Firefox 浏览器也有一个调试器。

设置断点

在index.js中设置断点，点击行号左侧的空白区域。这将设置一个断点，显示为一个红色圆圈。

设置断点

配置调试器

我们需要首先配置调试器。为此，请转到运行和调试视图（⇧⌘D（Windows, Linux Ctrl+Shift+D）），然后选择创建 launch.json 文件链接以创建launch.json调试器配置文件。选择Web App (Edge)从选择调试器下拉列表。这将在您的项目中创建一个launch.json文件，位于一个新.vscode文件夹中，其中包括启动网站的配置。

我们需要对我们的示例进行一个更改：将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 Hot Module Replacement文档中了解更多。

代码检查

Linters 分析你的源代码，并且在你运行应用程序之前可以警告你潜在的问题。VS Code 包含的 JavaScript 语言服务默认支持语法错误检查，你可以在 问题 面板中看到它的作用 (视图 > 问题 ⇧⌘M (Windows, Linux Ctrl+Shift+M))。

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

JavaScript 错误

检查器可以提供更复杂的分析，强制执行编码规范并检测反模式。一个受欢迎的JavaScript检查器是ESLint。ESLint，结合ESLint VS Code 扩展，提供了很好的内置检查体验。

首先，安装ESLint命令行工具：

npm install -g eslint

然后转到扩展视图并输入'eslint'来安装ESLint扩展。

ESLint 扩展

一旦安装了ESLint扩展并重新加载VS Code，您将需要创建一个ESLint配置文件，.eslintrc.js。您可以使用扩展的命令从命令面板 (⌃M⌘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’已定义但从未使用过。

应用程序未使用

您可以修改ESLint 规则在 .eslintrc.js文件中。

让我们添加一个错误规则来处理额外的分号：

 "rules": {
        "no-extra-semi":"error"
    }

现在，当您在一行中错误地使用了多个分号时，您将在编辑器中看到错误（红色波浪线）和问题面板中的错误条目。

额外的分号错误

热门入门套件

在这个教程中，我们使用create-react-app generator 来创建一个简单的 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

请参阅 添加 TypeScript 详细信息 在 Create React App 网站上.

Angular

Angular 是另一个受欢迎的网络框架。如果你希望看到Angular与VS Code结合使用的示例，请查看 使用Angular CLI进行调试 指南列表。它将引导你创建一个Angular应用程序并配置 launch.json 文件以供JavaScript调试器使用。

常见问题

我能在声明性的 JSX 中获得 IntelliSense 吗？

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

JSX 智能感知