# React

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 所需插件  :
>
>
>
> `React` 、  `Vite`  - 插件与 IntelliJ IDEA 捆绑在一起并默认启用。
>
>
>
> `JavaScript Debugger`  -  插件与 IntelliJ IDEA 捆绑在一起，并默认启用。

React  是一个用于从封装组件构建复杂交互用户界面的 JavaScript 库。 了解更多有关该库的信息，请访问 [React 官方网站](https://facebook.github.io/react/)。

IntelliJ IDEA 集成了 React，提供配置、编辑、linting、运行、调试和维护您的应用程序的帮助。

## 开始之前

Procedure:

1. 请确保您的计算机上安装了 [Node.js](http://nodejs.org/)。

2. 确保  JavaScript and TypeScript 、  React  和  Vite  所需插件已在   设置 | 插件   页面上启用。 如需更多信息，请参阅 [管理插件](managing-plugins.html)。

## 创建一个新的 React 应用程序

> **Note:**
> 推荐的方式是使用 [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite) 包来启动一个新的 React 单页应用程序，IntelliJ IDEA 会通过 [npx](https://www.npmjs.com/package/npx) 为您下载并运行它。 因此，您的开发环境已预配置为使用 Vite 和 React 以及 TypeScript，了解更多信息请参阅 [Vite 官方网站](https://blog.logrocket.com/build-react-typescript-app-vite/#benefits-using-react-vite)。

### 生成 React 应用程序

Procedure:

1. 从主菜单中选择  `文件 | 新建 | 项目` ，或者在   %instance% 主页   屏幕上点击  `新建 | 项目` 。

2. 在   新建项目   对话框的左侧窗格中，选择   Vite  。

3. 在向导的右侧部分，指定项目名称和创建该项目的文件夹。

4. 在   Node.js 运行时   字段中，指定要使用的 Node.js 运行时。 从列表中选择一个已配置的运行时，或选择   添加   以配置新的运行时。

从   React 命令行界面   列表中选择要使用的生成器。

* 接受默认 `[npx create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite)` ，可让开发环境预先配置好以使用 Vite。

* 选择 `[npx create-react-app](https://github.com/facebook/create-react-app)` ，可让开发环境预先配置好以使用 webpack、Babel 和 ESLint。

* 如需使用之前下载的自定义生成器，请点击 选择 ，并在打开的对话框中指定生成器路径。

![创建 React 应用 - 选择生成器](https://resources.jetbrains.com/help/img/idea/2026.3/react_create_project_select_generator.png)

5. 可选：

要使用 TSX 而不是 JSX，请选择   创建 TypeScript 项目   复选框。 IntelliJ IDEA 将为您的应用生成  `.tsx` 文件以及一个  `tsconfig.json` 配置文件。

6. 当您点击   创建  时，IntelliJ IDEA会生成一个  React  特定项目，并包括所有必需的配置文件和下载所需的依赖项。 IntelliJ IDEA 还会创建  npm start  和  JavaScript Debug  配置，其中包含用于运行或调试应用程序的默认设置。

> **Tip:**
> 或者，打开内置的   终端  ，输入  `npm create vite@latest`  以创建应用程序，然后回答向导中的问题，可从 [Vite 官方网站](https://blog.logrocket.com/build-react-typescript-app-vite/#creating-vite-project) 了解详情。

### 在空的 IntelliJ IDEA 项目中安装 React

在这种情况下，您将需要按照下文 [构建 React 应用程序](#react_compiling_application)中的描述自行配置构建管道。 从 [React 官方网站](https://react.dev/)了解更多关于将 React 添加到项目中的信息。

Procedure: 创建一个空的 IntelliJ IDEA 项目

1. 从主菜单中选择  `文件 | 新建 | 项目` ，或在   欢迎   屏幕上点击   新建项目   按钮。

2. 在   新建项目   对话框的左侧窗格中，选择   新建项目  。

3. 在右侧窗格中，选择   JavaScript   在   语言   区域。

4. 为新项目设置名称，并在必要时更改其位置，然后点击   创建  。

Procedure: 在空项目中安装 React

1. 打开您将使用  React  的空项目。

2. 在命令行 shell 或嵌入式   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）中输入：

`npm install --save react react-dom`

## 从现有的 React 应用程序开始

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

Procedure: 打开本机上已有的应用程序源代码

* 点击   打开或导入   屏幕上的   欢迎   或从主菜单中选择  `文件 | 打开` 。 在打开的对话框中，选择存储源文件的文件夹。

Procedure: 从版本控制系统检出应用程序源代码

1. 在   欢迎   屏幕上点击   克隆存储库  。

或者，从主菜单中选择  `文件 | 新建 | 从版本控制创建项目…` 、  `Git | 克隆…`  或  `VCS | 从版本控制获取` 。

在主菜单中，可能会看到与项目关联的其他任何版本控制系统，而不是   Git  。 例如，   Mercurial   或   Perforce  。

2. 在打开的对话框中，从列表中选择版本控制系统，并指定要从中检出应用程序源代码的仓库。 有关更多信息，请参阅 [检出项目（克隆）](manage-projects-hosted-on-github.html#clone-from-GitHub)。

Procedure: 下载依赖项

* 在弹出窗口中点击   运行 'npm install'   或   运行 'yarn install'  ：

![打开应用程序并下载依赖项](https://resources.jetbrains.com/help/img/idea/2026.3/ws_npm_yarn_package_run_npm_install.png)

您可以使用 [npm](https://docs.npmjs.com/)、 [Yarn 1](https://classic.yarnpkg.com/lang/en/) 或 [Yarn 2](https://yarnpkg.com/)，详情请参阅 [npm 和 Yarn](installing-and-removing-external-software-using-node-package-manager.html)。

* 或者，在编辑器中或在   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中，从  `package.json`  的上下文菜单中选择   运行 'npm install'   或   运行 'yarn install'  。

### 项目安全

打开在 IntelliJ IDEA 外部创建并导入其中的项目时，IntelliJ IDEA 会显示一个对话框，可在其中决定如何处理此包含不熟悉源代码的项目。

请选择以下选项之一：

* 在安全模式中预览 ：在这种情况下，IntelliJ IDEA 以预览模式打开项目。 这意味着可以浏览项目的源代码，但无法运行任务和脚本，也无法运行/调试项目。 IntelliJ IDEA 会在编辑器区域顶部显示一条通知，可以点击 信任项目… 链接随时加载项目。

* 信任项目 ：在这种情况下，IntelliJ IDEA 会打开并加载一个项目。 这意味着项目已初始化，项目的插件已解析，依赖项已添加，并且所有 IntelliJ IDEA 功能都可用。

* 不打开 ：在这种情况下，IntelliJ IDEA 不会打开项目。

有关更多信息，请参阅 [项目安全](project-security.html)。

> **Tip:**
> 从欢迎屏幕或通过  `文件 | 新建 | 项目`  创建的项目会被自动视为受信任。

## 代码补全

IntelliJ IDEA 为 JavaScript 代码中的 React APIs 和 [JSX](https://reactjs.org/docs/introducing-jsx.html) 提供代码补全。 代码补全适用于 React 方法、特定于 React 的特性、HTML 标记和组件名称、 [React 事件](https://facebook.github.io/react/docs/events.html#supported-events)、组件属性等。 请访问 [React 官方网站](https://facebook.github.io/react/docs/dom-elements.html)了解更多信息。

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

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

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

![完成弹出窗口](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_completion_methods_and_attributes.png)

在 JSX 标签中，IntelliJ IDEA 为 [特定于 React 的属性](https://facebook.github.io/react/docs/dom-elements.html)（例如  `className`  或  `classID` ）以及 [非 DOM 属性](https://facebook.github.io/react/docs/dom-elements.html)（例如  `key`  或  `ref` ）提供编码辅助。 此外，自动完成功能还适用于项目的 CSS 文件中定义的类名：

![CSS 类名补全](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_classname.png)

所有 [React 事件](https://facebook.github.io/react/docs/events.html#supported-events)（例如  `onClick`  或  `onChange` ）也可以与花括号   `={}`  或引号  `""`  一起自动完成。

![完成 React 事件](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_events.animated.gif)

默认情况下，会插入花括号。 您可以让 IntelliJ IDEA 始终添加引号，或根据 [TypeScript definition file (d.ts)](https://github.com/DefinitelyTyped/DefinitelyTyped) 的类型在引号和花括号之间选择。 要更改默认设置，请打开   设置  对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `编辑器 | 代码风格 | HTML` ，并从   为 JSX 属性添加  列表中选择适用的选项。

![为 JSX 属性添加](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_add_braces.png)

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

![在大括号内完成 JavaScript 表达式](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_javascript_expression.png)

### 完成 HTML 标签和组件名称

IntelliJ IDEA 为你在 JavaScript 方法中或其他组件中定义的 HTML 标记和组件名称提供代码补全。

![HTML 标签和组件名称的自动完成](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_component_completion.png)

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

![使用 ES6 语法的导入组件完成](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_imported_component_completion.png)

### 完成组件属性

IntelliJ IDEA 为使用  `propTypes`  定义的组件属性提供代码补全，并解析它们，以便你可以快速跳转或预览它们的定义。

![组件属性的补全](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_component_properties.animated.gif)

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

## 为函数式组件添加状态

IntelliJ IDEA 会建议一个快速修复，通过在特定位置定义未解析的引用，向函数式 React 组件添加  `[useState](https://react.dev/reference/react/useState)`  钩子。 IntelliJ IDEA 会自动为  `useState`  钩子插入  `import`  语句。 状态的类型将根据定义该引用的位置进行推断。

> **Note:**
> * 该功能仅在 `.tsx` 文件中的函数式 React 组件主体内可用。
>
> * 该功能不适用于类组件。

Procedure:

* 将插入符号置于未解析的引用处，按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))，然后在列表中选择   在 < functional component name> 组件中创建 <unresolved reference> 状态  。

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/react_add_state.mp4)

## 添加属性

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

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

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/react_add_props.mp4)

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

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/react_add_props_class.mp4)

> **Note:**
> 该功能仅在  `.tsx`  文件中可用。

Procedure:

* 将插入符号置于未解析的引用处，按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))，然后在列表中选择   在 <component name> 组件中创建 <unresolved reference> 属性  。

![添加属性](https://resources.jetbrains.com/help/img/idea/2026.3/react_add_props_steps.png)

## 将 HTML 属性转移到 JSX

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

![将 HTML 转换为 JSX](https://resources.jetbrains.com/help/img/idea/2026.3/ws_paste_from_html_to_jsx.animated.gif)

这也适用于 TSX：

![将 HTML 转换为 TSX](https://resources.jetbrains.com/help/img/idea/2026.3/ws_paste_from_html_to_tsx.animated.gif)

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

![将 HTML 转换为 JSX：关闭单标签](https://resources.jetbrains.com/help/img/idea/2026.3/ws_paste_from_html_to_jsx_close_tags.animated.gif)

要将 HTML 代码按原样复制到 JSX 或 TSX，请使用  Paste Simple  `Ctrl+Alt+Shift+V` (Windows), `⌘ ⌥ ⇧ V` (macOS), `⌘ ⌥ ⇧ V` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ ⇧ V` (macOS System Shortcuts), `Ctrl+Alt+Shift+V` (XWin), `Ctrl+Alt+Shift+V` (GNOME), `Ctrl+Alt+Shift+V` (KDE), `Ctrl+Alt+Shift+V` (Emacs), `Ctrl+V` (Sublime Text), `⌘ V` (Sublime Text (macOS)), `Ctrl+Alt+Shift+V` (Visual Studio), `⌘ ⌥ ⇧ V` (Visual Studio (macOS)), `Ctrl+Alt+Shift+V` (NetBeans), `Ctrl+Alt+Shift+V` (Eclipse), `⌘ ⌥ ⇧ V` (Eclipse (macOS))，或者打开   设置  对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `编辑器 | 常规 | 智能按键 | JavaScript` 设置页面，并清除   将代码粘贴到 JSX 文件时关闭 HTML 单一标记  和   粘贴到 JSX 文件时转换 HTML 特性名称  复选框。

## React 代码片段

IntelliJ IDEA 带有超过 50 个代码片段的集合，这些片段扩展为 React 应用中常用的不同语句和代码块，包括 [React Hooks](https://react.dev/reference/react)。 下面的示例展示了如何使用  rcjc  缩写创建一个定义新 React 组件的类：

![React 组件的实时模板](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_live_template.animated.gif)

### 从代码片段创建一个 React 代码结构

Procedure:

* 请在编辑器中输入所需的缩写并按下 `Tab` (Windows), `⇥` (macOS), `⇥` (IntelliJ IDEA Classic (macOS)), `⇥` (macOS System Shortcuts), `Tab` (XWin), `Tab` (GNOME), `Tab` (KDE), `Tab` (Emacs), `Tab` (Sublime Text), `⇥` (Sublime Text (macOS)), `Tab` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (NetBeans), `Tab` (Eclipse), `⇥` (Eclipse (macOS))。

* 按 `Ctrl+J` (Windows), `⌘ J` (macOS), `⌘ J` (IntelliJ IDEA Classic (macOS)), `⌘ J` (macOS System Shortcuts), `Ctrl+J` (XWin), `Ctrl+J` (GNOME), `Ctrl+J` (KDE), `Ctrl+J` (Emacs), `Ctrl+J` (Sublime Text), `Ctrl+J` (Sublime Text (macOS)), `Ctrl+K, X` (Visual Studio), `⌘ E, L` (Visual Studio (macOS)), `Ctrl+J` (NetBeans), `Ctrl+Alt+Shift+J` (Eclipse), `Ctrl+J` (Eclipse (macOS)) 并选择相关的代码片段。 要缩小搜索范围，请开始键入缩写，然后从 [补全列表](auto-completing-code.html) 中选择它。

如需更多信息，请参阅 [实时模板](using-live-templates.html)。

### 查看所有可用的 React 代码片段列表

Procedure:

* 在   设置   对话框 ( `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))) 中，点击   实时模板   下的   编辑器  ，然后展开   React   或   React hooks   节点。

![React 和 React hooks 活动模板](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_code_snippets.png)

## React 指令

IntelliJ IDEA 会识别并高亮显示文件顶部以及函数／方法内的以下 [React 指令](https://react.dev/reference/react-compiler/directives)：

* [使用客户端](https://react.dev/reference/rsc/use-client)

* [使用服务器](https://react.dev/reference/rsc/use-server)

* [使用 memo](https://react.dev/reference/react-compiler/directives/use-memo)

* [不使用 memo](https://react.dev/reference/react-compiler/directives/use-no-memo)

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/react_directives_highlight.mp4)

## JSX 中的 Emmet

通过 IntelliJ IDEA，您不仅可以在 HTML 中使用 [Emmet](https://docs.emmet.io/cheat-sheet/)，还可以在 JSX 代码中利用一些特别的 React 变体进行使用。 例如，缩写  div.my-class  在 JSX 中会扩展为  `<div className=”my-class"></div>` ，但不会像在 HTML 中那样扩展为  `<div class=”my-class"></div>` 。

![在 React 中扩展 Emmet 模板](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_emmet.animated.gif)

## 浏览 React 应用程序

除了 [基本导航](navigating-through-the-source-code.html)之外，IntelliJ IDEA 还能帮助您在 React 特定的代码元素之间跳转。

Procedure:

* 要跳转到方法的声明或大括号内的 JavaScript 表达式  `{}` ，请选择方法或表达式并按 `Ctrl+B` (Windows), `⌘ B` (macOS), `⌘ B` (IntelliJ IDEA Classic (macOS)), `⌘ B` (macOS System Shortcuts), `Ctrl+B` (XWin), `Ctrl+B` (GNOME), `Ctrl+B` (KDE), `Ctrl+Alt+G` (Emacs), `F12` (Sublime Text), `F12` (Sublime Text (macOS)), `F12` (Visual Studio), `F12` (Visual Studio (macOS)), `Ctrl+B` (NetBeans), `F3` (Eclipse), `F3` (Eclipse (macOS))。

要跳转到组件声明，选中组件名称并按下 `Ctrl+B` (Windows), `⌘ B` (macOS), `⌘ B` (IntelliJ IDEA Classic (macOS)), `⌘ B` (macOS System Shortcuts), `Ctrl+B` (XWin), `Ctrl+B` (GNOME), `Ctrl+B` (KDE), `Ctrl+Alt+G` (Emacs), `F12` (Sublime Text), `F12` (Sublime Text (macOS)), `F12` (Visual Studio), `F12` (Visual Studio (macOS)), `Ctrl+B` (NetBeans), `F3` (Eclipse), `F3` (Eclipse (macOS))。

> **Tip:**
> 或者，使用 `Ctrl+Click` (Windows), `Ctrl+Click` (macOS), `Ctrl+Click` (IntelliJ IDEA Classic (macOS)), `Ctrl+Click` (macOS System Shortcuts), `Ctrl+Click` (XWin), `Ctrl+Click` (GNOME), `Ctrl+Click` (KDE), `Ctrl+Click` (Emacs), `Ctrl+Click` (Sublime Text), `Ctrl+Click` (Sublime Text (macOS)), `Ctrl+Click` (Visual Studio), `Ctrl+Click` (Visual Studio (macOS)), `Ctrl+Click` (NetBeans), `Ctrl+Click` (Eclipse), `Ctrl+Click` (Eclipse (macOS))：按住 `Ctrl` (Windows), `Ctrl` (macOS), `Ctrl` (IntelliJ IDEA Classic (macOS)), `Ctrl` (macOS System Shortcuts), `Ctrl` (XWin), `Ctrl` (GNOME), `Ctrl` (KDE), `Ctrl` (Emacs), `Ctrl` (Sublime Text), `Ctrl` (Sublime Text (macOS)), `Ctrl` (Visual Studio), `Ctrl` (Visual Studio (macOS)), `Ctrl` (NetBeans), `Ctrl` (Eclipse), `Ctrl` (Eclipse (macOS))，将鼠标悬停在符号上。 当符号变为超链接时，其声明将显示在工具提示中。 按住键不放点击超链接，在编辑器中打开声明。 了解更多信息，请 [转到声明及其类型](navigating-through-the-source-code.html#go_to_declaration)。

* 若要查看组件定义，请按 `Ctrl+Shift+I` (Windows), `⌥ Space` (macOS), `⌘ ⇧ I` (IntelliJ IDEA Classic (macOS)), `⌘ Y` (macOS System Shortcuts), `Ctrl+Shift+I` (XWin), `Ctrl+Shift+I` (GNOME), `Ctrl+Shift+I` (KDE), `Ctrl+Shift+I` (Emacs), `Ctrl+Shift+I` (Sublime Text), `⌥ Space` (Sublime Text (macOS)), `Alt+F12` (Visual Studio), `⌥ Space` (Visual Studio (macOS)), `Ctrl+Shift+I` (NetBeans), `Ctrl+Shift+I` (Eclipse), `⌥ Space` (Eclipse (macOS))。

![在弹出窗口中查看组件的快速定义](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_quick_definition.png)

* 要查看组件的快速文档，请按 `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Ctrl+Q` (NetBeans), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS))。 了解详情，请参阅 [JavaScript 文档查找](viewing-javascript-reference.html)。

![React 组件的快速文档弹出窗口](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_quick_doc.png)

* IntelliJ IDEA 让您可以轻松通过 [editor breadcrumbs](using-code-editor.html#breadcrumbs)导航 JSX 标签，并在编辑器边栏中为标签树提供彩色高亮显示。

![React 应用中的 JSX 标签高亮和导航路径](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_jsx_tree_highlighting.png)

### 使用结构视图进行导航

结构   工具窗口与   结构   弹出窗口可帮助您更清晰地洞察 React 代码结构，便于导航并促进对 React 组件及相关元素的更好理解。

结构   工具窗口显示以下特定于 React 的节点：

* 带有其名称的 JSX 和 TSX 标签。

* React 组件 节点显示 React 组件声明。 对于每个符合 [React 组件定义](https://react.dev/learn/your-first-component) 的类或函数都会创建单独的节点。 ![结构视图——组件节点](https://resources.jetbrains.com/help/img/idea/2026.3/react_navigation_structure_view_component.png)

* React 挂钩 节点表示 React 钩子声明。 对于 React 组件内部每个符合 [Hook 规则](https://react.dev/warnings/invalid-hook-call-warning) 的函数调用，都会创建单独的节点。 每个节点都会显示钩子的名称及其泛型类型。 由钩子初始化的变量会作为其节点下的子节点显示。 ![结构视图——钩子节点](https://resources.jetbrains.com/help/img/idea/2026.3/react_navigation_structure_view_hooks.png) 对于以 `[variableName, setVariableName]` 格式返回 2 个变量的钩子，会在钩子名称旁以灰色显示变量名： ![结构视图——带有 setVariable 的钩子](https://resources.jetbrains.com/help/img/idea/2026.3/react_navigation_structure_view_hooks_setVariable.png)

* 条件 节点表示条件渲染的 JSX 标签节点。 不包含 JSX 的条件不会显示。 ![结构视图——条件节点](https://resources.jetbrains.com/help/img/idea/2026.3/react_navigation_structure_view_conditional.png)

* 特性 节点表示其他组件属性内的 JSX。 不包含 JSX 的属性不会显示。 ![结构视图——属性节点](https://resources.jetbrains.com/help/img/idea/2026.3/react_navigation_structure_view_attribute.png)

* 数组 节点表示包含 JSX 的数组。 ![结构视图——数组节点](https://resources.jetbrains.com/help/img/idea/2026.3/react_navigation_structure_view_array.png)

* 变量 节点表示包含 JSX 的变量。

* 映射 节点表示 JSX 内容中的数组 map。 ![结构视图—— map 节点](https://resources.jetbrains.com/help/img/idea/2026.3/react_navigation_structure_view_map.png)

Procedure:

* 要打开   结构   工具窗口，请按 `Alt+7` (Windows), `⌘ 7` (macOS), `⌘ 7` (IntelliJ IDEA Classic (macOS)), `⌘ 7` (macOS System Shortcuts), `Alt+7` (XWin), `Alt+7` (GNOME), `Alt+7` (KDE), `Alt+7` (Emacs), `Alt+7` (Sublime Text), `⌘ 7` (Sublime Text (macOS)), `Ctrl+Alt+F` (Visual Studio), `⌃ ⌥ F` (Visual Studio (macOS)), `Ctrl+7` (NetBeans), `Alt+7` (Eclipse), `⌘ 7` (Eclipse (macOS))，或在主菜单中转到  `视图 | Tool Windows | 结构` 。

* 要打开   结构   弹出窗口，请按 `Ctrl+F12` (Windows), `⌘ F12` (macOS), `⌘ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⇧ 7` (macOS System Shortcuts), `Ctrl+F12` (XWin), `Ctrl+F12` (GNOME), `Ctrl+0` (KDE), `Ctrl+F12` (Emacs), `Ctrl+R` (Sublime Text), `⌘ R` (Sublime Text (macOS)), `Alt+\` (Visual Studio), `⌥ \` (Visual Studio (macOS)), `Ctrl+F12` (NetBeans), `Ctrl+F3` (Eclipse), `⌘ O` (Eclipse (macOS))，或在主菜单中转到  `导航 | 文件结构` 。

* 结构   工具窗口与   结构   弹出窗口会与活动编辑器选项卡中的文件同步。 在结构视图中移动时，文件中的相应代码元素会被高亮显示。 此外，如果您在源代码中重命名某个项目，相应的节点也会随之更新。

要从结构视图中的某个项目跳转到源代码，请按 `F4` (Windows), `⌘ ↓` (macOS), `F4` (IntelliJ IDEA Classic (macOS)), `F4` (macOS System Shortcuts), `F4` (XWin), `F4` (GNOME), `F4` (KDE), `F4` (Emacs), `F4` (Sublime Text), `F4` (Sublime Text (macOS)), `F4` (Visual Studio), `⌘ ↓` (Visual Studio (macOS)), `F4` (NetBeans), `F12` (Eclipse), `F3` (Eclipse (macOS))。

详细了解请参阅 [源代码导航：文件结构](viewing-structure-of-a-source-file.html)。

## 检查 React 应用程序

所有 IntelliJ IDEA 内置的 [代码检查](code-inspection.html) 也适用于 JSX 代码中的 JavaScript 和 HTML。 IntelliJ IDEA 会提醒您未使用的变量和函数、缺少的关闭标签、缺少的语句等。

![React 应用中的 JavaScript 检查](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_inspection.png)

对于某些检查，IntelliJ IDEA 提供快速修复，例如，建议添加缺失的方法。 若要查看 quick-fix 弹出窗口，请按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))。

要自定义检查列表，请打开   设置  对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到 Editor | Inspections，并禁用您不想看到的检查或更改其严重性级别。 请从 [禁止并忽略检查](disabling-and-enabling-inspections.html)和 [更改检查严重性](configuring-inspection-severities.html)中了解更多信息。

### ESLint

除了提供内置代码检查之外，IntelliJ IDEA 还与 [ESLint](http://eslint.org/) 等 linter 集成，用于 JSX 代码。 ESLint 带来了一系列广泛的代码检查规则，这些规则也可以通过插件进行扩展。 IntelliJ IDEA 会在编辑器中直接显示由 ESLint 报告的警告和错误，您在键入时即可看到。 借助 ESLint，您还可以使用 [JavaScript Standard Style](https://standardjs.com/)，以及 [对 TypeScript 代码进行代码检查](linting-typescript.html#ws_eslint_linting_typescript_files_with_eslint_intro)。

有关更多信息，请参见 [ESLint](eslint.html)。

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

![使用 React 的 ESLint：错误和警告会被高亮显示，问题的描述会显示在工具提示中。](https://resources.jetbrains.com/help/img/idea/2026.3/ws_eslint_react.png)

> **Tip:**
> 如果您 [使用 create-react-app 创建了您的应用程序](#creating_react_app_with_generators)，您的开发环境已经预配置为使用 ESLint。

Procedure: 在 React 项目中安装和配置 ESLint

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

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

```

2. 将 [ESLint 配置文件](eslint.html#ws_eslint_configuration_file_format) 添加到项目中。

3. 在   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))）中，转到   语言 & 框架 | JavaScript | 代码质量工具 | ESLint  ，然后选择   自动 ESLint 配置  。 IntelliJ IDEA 会自动在您的项目  `node_modules`  文件夹中定位 ESLint，然后从  `.eslintrc.*`  文件或  `package.json` 中的  `eslintConfig`  属性使用默认配置。

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

请参见 [在 IntelliJ IDEA 中激活和配置 ESLint](eslint.html#ws_js_eslint_activate) 了解详细信息。

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

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

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

3. 在  `规则` 对象中，您可以列出希望启用的 [ESLint 内置规则](http://eslint.org/docs/rules/)以及 [通过 react 插件提供的规则](https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules)。

```JSON
{
  "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 官方网站](http://eslint.org/docs/2.0.0/user-guide/configuring.html#specifying-parser-options)。

## 构建一个 React 应用程序

如果您 [在现有的 IntelliJ IDEA 项目中安装了 React](#install_react_in_empty_project)，需要设置构建过程。 了解各种为您的 React 应用配置构建流水线的方法，详情请参阅 [React 官方网站](https://react.dev/)。

> **Tip:**
> 如果 [使用 create-vite 创建了应用程序](#creating_react_app_with_generators)，开发环境已预配置为使用 Webpack 和 Babel。

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

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

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

Procedure:

1. 在项目根目录中，从上下文菜单中选择   新建 | 文件  并将文件名指定为  `.ws-context` 。

2. 在  `.ws-context` 中，使用两种属性：

* `<context-name>` 带有上下文值字符串

* 具有上下文详情对象的 GLOB 模式

3. 使用以下上下文值：

* `framework` ： `vue` 、 `angular` 、 `react` 、 `svelte` 、 `astro`

* `angular-template-syntax` : `V_2` 、 `V_17`

* `nextjs-project` ： `nextjs`

* `astro-project` ： `astro`

* `vue-store` : `vuex` 、 `pinia`

* `vue-class-component-library` ： `vue-class-component` 、 `vue -property-decorator` 、 `vue-facing-decorator`

* `jsdoc-dialect` : `jsdoc-typescript` 、 `jsdoc-closure`

4. 使用路径嵌套以简化操作。

* GLOB 路径的最后一段是文件名模式，它仅支持 `*` 通配符。

* 如果最后一个段是一个 `**` ，它匹配所有嵌套的目录和文件。

* 顶层上下文属性应具有 `/**` 模式。

5. 当多个模式匹配相同文件名时，将使用以下规则进行消歧：

* 选择路径段数最多的模式，排除 `**` 段。

* 选择纯文件名模式，这意味着它不会以 `**` 或 `/` 结尾。

* 选择最先定义的模式。

### 示例

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

![具有不同框架的项目](https://resources.jetbrains.com/help/img/idea/2026.3/several_frameworks_context_project_structure.png)

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

```JSON
{
  "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"
  }
}
        
```

## See also

### 语言和框架特定指南

[JavaScript](javascript-specific-guidelines.html) [配置 JavaScript 库](configuring-javascript-libraries.html) [TypeScript](typescript-support.html)

### 参考

[JavaScript](settings-languages-javascript.html)

### 外部链接

[Working with React in WebStorm: Coding Assistance](http://blog.jetbrains.com/webstorm/2015/10/working-with-reactjs-in-webstorm-coding-assistance/)