React

开始之前

从现有的 React 应用程序开始

要继续开发现有的 React 应用程序，请在 JetBrains Rider 中打开并下载所需的依赖项。

代码补全

JetBrains Rider 为 JavaScript 代码中的 React APIs 和 JSX 提供代码补全。 代码补全适用于 React 方法、特定于 React 的属性、HTML 标签和组件名称、 React 事件 、组件属性等。 请访问 React 官方网站了解更多信息。

要获得 React 方法和 React 特定属性的代码补全，您需要在项目中的某个地方包含 react.js 库文件。 通常库已经在您的 node_modules 文件夹中。

完整的 React 方法、属性和事件

默认情况下，代码补全弹窗会在您输入时自动显示。 例如：

在 JSX 标签中，JetBrains Rider 为 特定于 React 的属性 （例如 className 或 classID ）以及 非 DOM 属性 （例如 key 或 ref ）提供编码辅助。 此外，自动完成功能还适用于项目的 CSS 文件中定义的类名：

所有 React 事件 （例如 onClick 或 onChange ）也可以与花括号  ={} 或引号 "" 一起自动完成。

默认情况下，会插入花括号。 您可以让 JetBrains Rider 始终添加引号，或根据 TypeScript definition file (d.ts) 的类型在引号和花括号之间选择。 要更改默认设置，请打开 设置/首选项 对话框（Ctrl+Alt+S ），转到 编辑器 | 代码风格 | HTML 并从 为 JSX 属性添加 列表中选择适用的选项。

代码补全同样适用于大括号内的 JavaScript 表达式。 这适用于您定义的所有方法和函数：

完成 HTML 标签和组件名称

JetBrains Rider 为 HTML 标签和 JavaScript 方法或其他组件中定义的组件名称提供代码补全：

补全同样适用于使用 ES6 风格语法导入的组件：

完成组件属性

JetBrains Rider 为使用 propTypes 定义的组件属性提供代码补全，并解析它们，这样您就可以快速跳转或预览它们的定义：

当您自动完成组件的名称时，JetBrains Rider 会自动添加它的所有必需属性。 如果某个组件的使用中缺少一些必需的属性，JetBrains Rider 会提醒您。

为函数式组件添加状态

JetBrains Rider 通过在特定位置定义未解析的引用，建议快速修复以向函数式 React 组件添加 useState 钩子。 JetBrains Rider 会自动为 useState 钩子插入 import 语句。 状态的类型将根据定义该引用的位置进行推断。

添加属性

JetBrains Rider 通过在特定位置定义未解析的引用，建议快速修复以向 React 组件添加新属性。

JetBrains Rider 会生成包含新增属性的组件代码。 属性的类型将根据定义相应引用的位置进行推断。

该快速修复也可用于类组件。 在此类情况下，在插入新属性后，未解析的引用将被替换为 this.props.${reference_name}。

将 HTML 属性转移到 JSX

当您复制带有类属性或事件处理程序的 HTML 代码并将其粘贴到 JSX 中时，JetBrains Rider 会自动将这些属性替换为特定于 React 的属性（className、 onClick、 onChange 等）。

这也适用于 TSX：

当您将包含单标签的 HTML 代码片段复制并粘贴到 JSX 中时，JetBrains Rider 会在每个单标签的末尾自动添加斜杠 /。

要将 HTML 代码按原样复制到 JSX 或 TSX，请使用 Paste Simple Ctrl+Alt+Shift+V 或打开 设置/首选项 对话框（Ctrl+Alt+S ），转到 编辑器 | 常规 | 输入辅助 | JavaScript 设置页面并清除 将代码粘贴到 JSX 文件时关闭 HTML 单一标记 和 粘贴到 JSX 文件时转换 HTML 属性名称 复选框。

React 代码片段

JetBrains Rider 带有超过 50 个代码片段的集合，这些片段扩展为 React 应用中常用的不同语句和代码块，包括 React Hooks。 下面的示例展示了如何使用 rcjc 缩写创建一个定义新 React 组件的类：

React 指令

JetBrains Rider 能识别并高亮显示文件顶部和函数中以下 React 指令：

• use client

• use server

• use memo

• use no memo

JSX 中的 Emmet

通过 JetBrains Rider，您不仅可以在 HTML 中使用 Emmet ，还可以在 JSX 代码中利用一些特别的 React 变体进行使用。 例如，缩写 div.my-class 在 JSX 中扩展为 <div className=”my-class"></div> ，但不会像在 HTML 中那样扩展为 <div class=”my-class"></div>：

浏览 React 应用程序

除了 基本导航之外，JetBrains Rider 还能帮助您在 React 特定的代码元素之间跳转。

检查 React 应用程序

所有 JetBrains Rider 内置的 代码检查 也适用于 JSX 代码中的 JavaScript 和 HTML。 JetBrains Rider 会提醒您未使用的变量和函数、缺少的关闭标签、缺少的语句等。

对于某些检查，JetBrains Rider 提供快速修复，例如，建议添加缺失的方法。 若要查看 quick-fix 弹出窗口，请按 Alt+Enter。

要自定义检查列表，请打开 设置/首选项 对话框（Ctrl+Alt+S ），转到 Editor | Inspection Settings，并禁用您不想看到的检查或更改其严重级别。

ESLint

除了提供内置代码检查之外，JetBrains Rider 还与 ESLint 等 linter 集成，用于 JSX 代码。 ESLint 带来了一系列广泛的代码检查规则，这些规则也可以通过插件进行扩展。 JetBrains Rider 会在编辑器中直接显示由 ESLint 报告的警告和错误，您在键入时即可看到。 借助 ESLint，您还可以使用 JavaScript Standard Style ，以及 对 TypeScript 代码进行代码检查。

有关更多信息，请参见 ESLint。

要让 ESLint 正确理解 React JSX 语法，您需要 eslint-plugin-react。 使用此插件，您会收到警告，例如，当 React 组件没有设置显示名称，或者使用了一些危险的 JSX 属性时：

在 React 项目中安装和配置 ESLint

1. 在内置 终端 (视图｜工具窗口｜终端) 中，键入：

   npm install --save-dev eslint npm install --save-dev eslint-plugin-react

2. 将 ESLint 配置文件 添加到您的项目中。

3. 在 设置/首选项 对话框（Ctrl+Alt+S ）中，转到 语言与框架 | JavaScript | 代码质量工具 | ESLint ，然后选择 自动 ESLint 配置。 JetBrains Rider 会自动在您的项目 node_modules 文件夹中定位 ESLint，然后从 .eslintrc.* 文件或 package.json 中的 eslintConfig 属性使用默认配置。

   或者，选择 手动 ESLint 配置 使用自定义 ESLint 程序包和配置。

   请参见 在 JetBrains Rider 中激活和配置 ESLint 了解详细信息。

ESLint 1.x 版本与 react 插件的 .eslintrc 结构示例

1. 在 ecmaFeatures 对象中，添加 "jsx" = true。 在这里，您还可以指定想要使用的其他语言功能，例如，ES6 classes、modules等。

2. 在 plugins 对象中，添加 react。

3. 在 rules 对象中，您可以列出希望启用的 ESLint 内置规则以及 通过 react 插件提供的规则。

   { "parser": "babel-eslint", "env": { "browser": true, "es6": true, "jest": true }, "rules": { "arrow-parens": ["error", "as-needed", { "requireForBlockBody": true }], "react/jsx-props-no-spreading": "off", "react/jsx-sort-props": ["error", { "reservedFirst": ["key"] }], "react/require-default-props": "off", "react/sort-prop-types": "error", "react/state-in-constructor": ["error", "never"], "semi-spacing": "warn" }, "overrides": [ { "files": [ "sample/**", "test/**" ], "rules": { "import/no-unresolved": "off" } } ] }

了解更多关于 ESLint 和 react 插件配置的信息，请访问 ESLint 官方网站。

网络研讨会录制：React + TypeScript + TDD 在 Rider 中

您还可以观看此网络研讨会录制，其中 Paul Everitt 展示了在 Rider 中使用 TypeScript 进行 React 项目的一些关键步骤。

网络研讨会议程：

• 2:00 – 项目设置

• 10:10 – ASP.NET Core 项目中的 React

• 14:57 – 项目清理

• 22:42 – 测试

• 37:26 – 测试期间调试

• 43:35 – 使用浏览器调试

• 54:26 – 剩余部分概览

资源:

• 12 部分教程 ，此网络研讨会基于此

• ASP.NET Core SPA 开发体验 – 关于网络研讨会中讨论的 ASP.NET Core 模板的信息

在一个项目中使用多个框架

有时，您可能需要在一个 React 项目中使用其他框架。

要在每个文件中获得上下文感知的编码辅助，请创建一个配置文件 .ws-context ，并指定每个特定文件或文件夹应使用的框架。 该文件中的设置将覆盖默认配置。

示例

假设您有一个项目，其中在各个文件夹中使用了多个框架。

要为项目中的每个文件获得上下文相关的帮助，请将以下代码添加到 .ws-context:

{ "framework": "vue", "angular-template-syntax": "V_2", "src/**/app/**": { "framework": null, "app.component.html" : { "framework": "angular", "angular-template-syntax": "V_17" } }, "src/**/p*-editor/*.html" : { "framework" : "angular" } }