现已发布!阅读 10 月份的新功能和修复。

在 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 --versionnpm --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 徽标和指向 https://127.0.0.1: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)))。您将获得不错的格式化、指向标题的超链接导航以及代码块中的语法突出显示。

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.jsApp 定义。

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 应用程序 (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://127.0.0.1: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 扩展结合使用,提供了出色的产品内代码 linter 体验。

首先,安装 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 应用程序,它创建了一个简单的 TODO 应用程序,并包含 Node.js Express 服务器的源代码。它还展示了如何使用Babel ES6 编译器,然后使用webpack捆绑站点资产。

TypeScript React

如果你对 TypeScript 和 React 感兴趣,你还可以通过指定要使用 TypeScript 模板来创建一个create-react-app应用程序的 TypeScript 版本

npx create-react-app my-app --template typescript

查看添加 TypeScriptCreate React App 网站上的详细信息。

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