在 Visual Studio Code 中使用 React

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

欢迎来到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

你应该在浏览器中看到React的标志和一个指向http://localhost:3000的“学习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为各种源代码元素提供了语法高亮，如果你将光标放在一个括号上，匹配的括号也会被选中。

智能感知

当你在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 关闭 Peek 窗口。

你好，世界

让我们将示例应用程序更新为“Hello World!”。在index.js中创建一个名为HelloWorld的组件，其中包含一个带有“Hello, world!”的H1标题，并将root.render中的标签替换为。

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

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

你可以逐步执行你的源代码（F10），检查变量如HelloWorld，并查看客户端React应用程序的调用堆栈。

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

实时编辑和调试

如果您在React应用中使用webpack，可以通过利用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

详情请参见Adding TypeScript在Create React App 网站上。

Angular

Angular 是另一个流行的网页框架。如果你想看一个 Angular 与 VS Code 配合使用的示例，请查看 使用 Angular CLI 进行调试 的教程。它将引导你创建一个 Angular 应用程序并配置 JavaScript 调试器的 launch.json 文件。

常见问题

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

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