尝试以扩展 VS Code 中的代理模式!

在 Visual Studio Code 中使用 React

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

Welcome to React

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 徽标和指向 https://:3000 的“Learn React”链接。我们将让 Web 服务器保持运行,同时使用 VS Code 查看应用程序。

要在 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))。您将获得漂亮的格式、到标题的超链接导航以及代码块中的语法高亮。

README Markdown Preview

语法高亮和括号匹配

现在展开 `src` 文件夹并选择 `index.js` 文件。您会注意到 VS Code 对各种源代码元素都进行了语法高亮显示,并且如果您将光标放在一个括号上,匹配的括号也会被选中。

React bracket matching

IntelliSense

当您开始在 `index.js` 中键入时,您会看到智能建议或补全。

React IntelliSense suggestions

在您选择一个建议并键入 `.` 后,您会通过 IntelliSense 看到对象上的类型和方法。

React IntelliSense

VS Code 使用 TypeScript 语言服务来提供 JavaScript 代码智能,它有一个名为 自动类型获取 (ATA) 的功能。ATA 会为 `package.json` 中引用的 npm 模块下载 npm 类型声明文件(`*.d.ts`)。

如果您选择一个方法,您还会获得参数帮助。

React parameter help

转到定义,速览定义

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

React Peek definition

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` 用户设置

Hello, world

调试 React

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

注意:本教程假定您已安装 Edge 浏览器。如果您想使用 Chrome 进行调试,请将启动 `type` 替换为 `chrome`。此外,还有一个适用于 Firefox 浏览器的调试器。

设置断点

要在 `index.js` 中设置断点,请单击行号左侧的边距。这将设置一个断点,它将显示为一个红色的圆圈。

Set a breakpoint

配置调试器

我们需要首先配置调试器。为此,请转到**运行和调试**视图(⇧⌘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 或绿色箭头启动调试器并打开一个新的浏览器实例。设置断点的源代码在调试器附加之前已在启动时运行,因此我们只有在刷新网页后才会命中断点。刷新页面,您应该会命中断点。

Debugger hitting breakpoint

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

Debug element variable

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

实时编辑和调试

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

代码检查

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

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

JavaScript error

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

首先,安装 ESLint 命令行工具:

npm install -g eslint

然后通过转到**扩展**视图并键入“eslint”来安装 ESLint 扩展。

ESLint extension

安装 ESLint 扩展并重新加载 VS Code 后,您需要创建一个 ESLint 配置文件 `.eslintrc.js`。您可以使用扩展的**ESLint: 创建 ESLint 配置**命令从**命令面板**(⇧⌘P (Windows、Linux Ctrl+Shift+P))创建它。

Find the configuration command

该命令将提示您在**终端**面板中回答一系列问题。选择默认值,它将在您的项目根目录中创建一个 `.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”已定义但从未使用的警告。

App is unused

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

让我们为多余的分号添加一个错误规则:

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

现在,当您错误地在一行中输入多个分号时,您会在编辑器中看到一个错误(红色波浪线)并在**问题**面板中看到错误条目。

Extra semicolon error

在本教程中,我们使用 `create-react-app` 生成器创建了一个简单的 React 应用程序。有许多优秀的示例和启动套件可帮助您构建第一个 React 应用程序。

VS Code React 示例

这是一个 示例 React 应用程序,它创建了一个简单的待办事项应用程序,并包含一个 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。

JSX IntelliSense