React
React 是一个用于从封装组件构建复杂交互用户界面的 JavaScript 库。 了解更多有关该库的信息，请访问 React 官方网站。
IntelliJ IDEA 集成了 React，提供配置、编辑、linting、运行、调试和维护您的应用程序的帮助。
开始之前
请确保您的计算机上安装了 Node.js。
确保 JavaScript and TypeScript和 JavaScript Debugger必需插件在 设置 | 插件 页面上的 已安装 选项卡中被启用。 如需更多信息，请参阅 管理插件。
在 设置 | 插件 页面，选项卡 Marketplace 上安装 React 和 Vite 插件，如 从 JetBrains Marketplace 安装插件 中所述。
创建一个新的 React 应用程序
推荐的方式是使用 create-vite 包来启动一个新的 React 单页应用程序，IntelliJ IDEA 会通过 npx 为您下载并运行它。 因此，您的开发环境已预配置为使用 Vite 和 React 以及 TypeScript，了解更多信息请参阅 Vite 官方网站。
使用 create-vite 生成一个 React 应用程序
从主菜单中选择 ，或者在 欢迎 屏幕上点击 新建项目 按钮。
在 新建项目 对话框的左侧窗格中，选择 Vite。
在向导的右侧部分，指定项目名称和创建该项目的文件夹。
在 Node.js 运行时 字段中，指定要使用的 Node.js 运行时。 从列表中选择一个已配置的运行时，或选择 添加 以配置新的运行时。
从 Vite 列表中选择 npx create-vite。
从 模板 列表中选择
react。可选：
要使用 TSX 而不是 JSX，请选择 创建TypeScript 项目(T) 复选框。 IntelliJ IDEA 将为您的应用生成 .tsx 文件以及一个 tsconfig.json 配置文件。
当您点击 创建 时，IntelliJ IDEA会生成一个 React 特定项目，并包括所有必需的配置文件和下载所需的依赖项。 IntelliJ IDEA 还会创建一个 npm start 和 JavaScript Debug 配置，使用默认设置来运行或调试您的应用程序。
在空的 IntelliJ IDEA 项目中安装 React
在这种情况下，您将需要按照下文 构建 React 应用程序中的描述自行配置构建管道。 从 React 官方网站了解更多关于将 React 添加到项目中的信息。
创建一个空的 IntelliJ IDEA 项目
从主菜单中选择 ，或者在 欢迎 屏幕上点击 新建项目 按钮。
在 新建项目 对话框的左侧窗格中，选择 新建项目。
在右侧窗格中，选择 JavaScript 在 语言 区域。
为新项目命名，并在必要时更改其位置，然后点击 创建。
在空项目中安装 React
打开您将使用 React 的空项目。
在内置的 终端 （Alt+F12 ）中，输入：
npm install --save react react-dom
从现有的 React 应用程序开始
要继续开发现有的 React 应用程序，请在 IntelliJ IDEA 中打开并下载所需的依赖项。
打开您计算机上已有的应用程序源代码
点击 打开或导入 屏幕上的 欢迎 或从主菜单中选择 。 在打开的对话框中，选择存储源文件的文件夹。
从您的版本控制系统检出应用程序源代码
在 欢迎 屏幕上点击 克隆存储库。
或者，从主菜单中选择 、 或 。
在主菜单中，您可能会看到与您的项目关联的其他任何版本控制系统，而不是 Git。 例如， Mercurial 或 Perforce。
在打开的对话框中，从列表中选择您的版本控制系统，并指定要从中检出应用程序源代码的存储库。 有关更多信息，请参阅 检出项目（克隆）。
下载依赖项
在弹出窗口中点击 运行 'npm install' 或 运行 'yarn install'：
您可以使用 npm、 Yarn 1 或 Yarn 2 ，详情请参阅 npm 和 Yarn。
或者，在编辑器中或在 项目 工具窗口 Alt+1 中，从 package.json 的上下文菜单中选择 运行 'npm install' 或 运行 'yarn install'。
项目安全
当您打开一个在 IntelliJ IDEA 外部创建并导入到其中的项目时，IntelliJ IDEA 会显示一个对话框，您可以在其中决定如何处理包含不熟悉的源代码的项目。
请选择以下选项之一：
在安全模式中预览 ：在这种情况下，IntelliJ IDEA 以预览模式打开项目。 这意味着您可以浏览项目的源代码，但无法运行任务和脚本，也无法运行或调试您的项目。
IntelliJ IDEA 会在编辑器区域顶部显示一条通知，您可以点击 信任项目… 链接，随时加载您的项目。
信任项目 ：在这种情况下，IntelliJ IDEA 会打开并加载一个项目。 这意味着项目已初始化，项目的插件已解析，依赖项已添加，并且所有 IntelliJ IDEA 功能均可用。
不打开 ：在这种情况下，IntelliJ IDEA 不会打开项目。
有关更多信息，请参阅 项目安全。
代码补全
IntelliJ IDEA 为 JavaScript 代码中的 React APIs 和 JSX 提供代码补全。 代码补全适用于 React 方法、特定于 React 的属性、HTML 标签和组件名称、 React 事件 、组件属性等。 请访问 React 官方网站了解更多信息。
要获得 React 方法和 React 特定属性的代码补全，您需要在项目中的某个地方包含 react.js 库文件。 通常库已经在您的 node_modules 文件夹中。
完整的 React 方法、属性和事件
默认情况下，代码补全弹窗会在您输入时自动显示。 例如：
在 JSX 标签中，IntelliJ IDEA 为 特定于 React 的属性 （例如 className 或 classID ）以及 非 DOM 属性 （例如 key 或 ref ）提供编码辅助。 此外，自动完成功能还适用于项目的 CSS 文件中定义的类名：
所有 React 事件 （例如 onClick 或 onChange ）也可以与花括号  ={} 或引号 "" 一起自动完成。
默认情况下，会插入花括号。 您可以让 IntelliJ IDEA 始终添加引号，或根据 TypeScript definition file (d.ts) 的类型在引号和花括号之间选择。 要更改默认设置，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，并从 为 JSX 属性添加 列表中选择适用的选项。
代码补全同样适用于大括号内的 JavaScript 表达式。 这适用于您定义的所有方法和函数：
完成 HTML 标签和组件名称
IntelliJ IDEA 为 HTML 标签和 JavaScript 方法或其他组件中定义的组件名称提供代码补全：
补全同样适用于使用 ES6 风格语法导入的组件：
完成组件属性
IntelliJ IDEA 为使用 propTypes 定义的组件属性提供代码补全，并解析它们，这样您就可以快速跳转或预览它们的定义：
当您自动完成组件的名称时，IntelliJ IDEA 会自动添加它的所有必需属性。 如果某个组件的使用中缺少一些必需的属性，IntelliJ IDEA 会提醒您。
为函数式组件添加状态
IntelliJ IDEA 通过在特定位置定义未解析的引用，建议快速修复以向函数式 React 组件添加 useState 钩子。 IntelliJ IDEA 会自动为 useState 钩子插入 import 语句。 状态的类型将根据定义该引用的位置进行推断。
将插入符号置于未解析的引用处，按 Alt+Enter ，然后在列表中选择 在 < functional component name> 组件中创建 <unresolved reference> 状态。
添加属性
IntelliJ IDEA 通过在特定位置定义未解析的引用，建议快速修复以向 React 组件添加新属性。
IntelliJ IDEA 会生成包含新增属性的组件代码。 属性的类型将根据定义相应引用的位置进行推断。
该快速修复也可用于类组件。 在此类情况下，在插入新属性后，未解析的引用将被替换为 this.props.${reference_name}。
将插入符号置于未解析的引用处，按 Alt+Enter ，然后在列表中选择 在 <component name> 组件中创建 <unresolved reference> 属性。
将 HTML 属性转移到 JSX
当您复制带有类属性或事件处理程序的 HTML 代码并将其粘贴到 JSX 中时，IntelliJ IDEA 会自动将这些属性替换为特定于 React 的属性（className、 onClick、 onChange 等）。
这也适用于 TSX：
当您将包含单标签的 HTML 代码片段复制并粘贴到 JSX 中时，IntelliJ IDEA 会在每个单标签的末尾自动添加斜杠 /。
要将 HTML 代码按原样复制到 JSX 或 TSX，请使用 Paste Simple Ctrl+Alt+Shift+V ，或者打开 设置 对话框（Ctrl+Alt+S ），转到 设置页面，并清除 将代码粘贴到 JSX 文件时关闭 HTML 单一标记 和 将 HTML 属性名称粘贴到 JSX 文件时进行转换 复选框。
React 代码片段
IntelliJ IDEA 带有超过 50 个代码片段的集合，这些片段扩展为 React 应用中常用的不同语句和代码块，包括 React Hooks。 下面的示例展示了如何使用 rcjc 缩写创建一个定义新 React 组件的类：
从代码片段创建一个 React 代码结构
请在编辑器中输入所需的缩写并按下 Tab。
按 Ctrl+J 并选择相关的代码片段。 要缩小搜索范围，请开始键入该缩写，然后在 补全列表 中选择它。
如需更多信息，请参阅 实时模板。
查看所有可用的 React 代码片段列表
在 设置 对话框 (Ctrl+Alt+S) 中，点击 实时模板 下的 编辑器 ，然后展开 React 或 React hooks 节点。
JSX 中的 Emmet
通过 IntelliJ IDEA，您不仅可以在 HTML 中使用 Emmet ，还可以在 JSX 代码中利用一些特别的 React 变体进行使用。 例如，缩写 div.my-class 在 JSX 中扩展为 <div className=”my-class"></div> ，但不会像在 HTML 中那样扩展为 <div class=”my-class"></div>：
浏览 React 应用程序
除了 基本导航之外，IntelliJ IDEA 还能帮助您在 React 特定的代码元素之间跳转。
要跳转到方法的声明或大括号内的 JavaScript 表达式
{}，请选择方法或表达式并按 Ctrl+B。要跳转到组件声明，选中组件名称并按下 Ctrl+B。
若要查看组件定义，请按 Ctrl+Shift+I。
要查看组件的快速文档，请按 Ctrl+Q。 了解详情，请参阅 JavaScript 文档查找。
使用结构视图进行导航
结构 工具窗口与 结构 弹出窗口可帮助您更清晰地洞察 React 代码结构，便于导航并促进对 React 组件及相关元素的更好理解。
结构 工具窗口显示以下特定于 React 的节点：
由钩子初始化的变量会作为其节点下的子节点显示。
检查 React 应用程序
所有 IntelliJ IDEA 内置的 代码检查 也适用于 JSX 代码中的 JavaScript 和 HTML。 IntelliJ IDEA 会提醒您未使用的变量和函数、缺少的关闭标签、缺少的语句等。
对于某些检查，IntelliJ IDEA 提供快速修复，例如，建议添加缺失的方法。 若要查看 quick-fix 弹出窗口，请按 Alt+Enter。
要自定义检查列表，请打开 设置 对话框（Ctrl+Alt+S ），转到 Editor | Inspections，并禁用您不想看到的检查或更改其严重性级别。 请从 禁止并忽略检查 和 更改检查严重性 中了解更多信息。
ESLint
除了提供内置代码检查之外，IntelliJ IDEA 还与 ESLint 等 linter 集成，用于 JSX 代码。 ESLint 带来了一系列广泛的代码检查规则，这些规则也可以通过插件进行扩展。 IntelliJ IDEA 会在编辑器中直接显示由 ESLint 报告的警告和错误，您在键入时即可看到。 借助 ESLint，您还可以使用 JavaScript Standard Style ，以及 对 TypeScript 代码进行代码检查。
有关更多信息，请参见 ESLint。
要让 ESLint 正确理解 React JSX 语法，您需要 eslint-plugin-react。 使用此插件，您会收到警告，例如，当 React 组件没有设置显示名称，或者使用了一些危险的 JSX 属性时：
在 React 项目中安装和配置 ESLint
在内置 终端 () 中，键入：
npm install --save-dev eslint npm install --save-dev eslint-plugin-react将 ESLint 配置文件 添加到您的项目中。
在 设置 对话框（Ctrl+Alt+S ）中，转到 语言与框架 | JavaScript | 代码质量工具 | ESLint ，然后选择 自动 ESLint 配置。 IntelliJ IDEA 会自动在您的项目 node_modules 文件夹中定位 ESLint，然后从 .eslintrc.* 文件或 package.json 中的
eslintConfig属性使用默认配置。或者，选择 手动 ESLint 配置 使用自定义 ESLint 程序包和配置。
请参见 在 IntelliJ IDEA 中激活和配置 ESLint 了解详细信息。
ESLint 1.x 版本与 react 插件的 .eslintrc 结构示例
在
ecmaFeatures对象中，添加"jsx" = true。 在这里，您还可以指定想要使用的其他语言功能，例如，ES6 classes、modules等。在
plugins对象中，添加react。在
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 应用中的代码重构
除了 common IntelliJ IDEA refactorings之外，在 React 应用程序中，您还可以对 React 组件运行 Rename ，并使用 Extract Component创建新组件。
重命名组件
下面是重命名仅在一个文件中定义和使用的组件的示例：
同样地，您可以重命名在一个文件中定义并使用命名导出导入到另一个文件的组件：
将光标放在组件名称内并按 Shift+F6 或从上下文菜单中选择 。
请指定符合 React 命名规范的新组件名称。
重命名状态值
当您重命名状态值时，IntelliJ IDEA 会建议您重命名相应的 setter（此函数在 React useState hook 中更新该状态值）。
将文本光标置于状态值的名称内，然后按 Shift+F6 或从主菜单或上下文菜单中选择 。
请指定新的值名称并按 Enter。 焦点移动到 setter，其中建议了该值的新名称。 按 Enter 接受建议。
提取组件
您可以通过从现有组件的 render 方法中提取 JSX 代码来创建一个新的 React 组件。 新组件可以定义为函数或类，请参阅 React 官方网站上的 Function and Class Components。
请选择您要提取的代码，然后从上下文菜单中选择 。
或者，前往主菜单中的 或按下 Ctrl+Alt+Shift+T 并从弹出窗口中选择 提取组件。
在打开的对话框中，指定新组件的名称及其类型。 默认情况下，将创建一个函数组件。 如果您想将新组件定义为类，请选择 类。
点击 OK。 新的组件将被定义在现有组件旁边并在其中使用。
可选：使用 Move Symbol refactoring将新组件和所有必需的导入移动到一个单独的文件。
可选：修改 IntelliJ IDEA 用于新组件的代码模板。 在 设置 对话框中(Ctrl+Alt+S )，转到 ，打开 代码 选项卡，并使用 Apache Velocity 模板语言根据需要更新模板。
将函数转换为类组件
通过 Convert to Class Component重构，IntelliJ IDEA 生成一个具有您想要转换的函数名称的 ES6 类。 该类扩展了 React .Component ，并包含一个 render() 方法，其中函数体被移动。 从 React 官方网站 了解更多信息。
将文本光标放置在要转换的函数内的任意位置，然后从主菜单或上下文菜单中选择 。
或者，按 Ctrl+Alt+Shift+T ，然后在弹出窗口中选择 转换为类组件。
将类转换为函数组件
使用 Convert to Functional Component 重构，IntelliJ IDEA 会生成一个具有您要转换的类名的函数，并将 render() 方法的内容移至函数体。
将文本光标置于要转换的类中的任意位置，然后选择主菜单或上下文菜单中的 。
或者，按 Ctrl+Alt+Shift+T ，然后在弹出窗口中选择 转换为函数组件。
在 React 应用中的解构
解构让您可以轻松地将数组和对象中的值解包到变量中。 该功能具有非常简洁的语法，通常在您需要在应用程序中传递数据时使用。
在使用 React 类组件时，考虑使用 Introduce object/array destructuring 意图操作。 了解更多关于 JavaScript 解构的信息。
运行 React 应用程序
在 package.json 中
start脚本旁的装订区域中单击
，或在 终端 Alt+F12 中执行 npm run start命令，或在 npm 工具窗口 () 中双击start任务。
请等待应用编译完成且开发服务器就绪。
在 运行 工具窗口或 终端 中会显示您的应用正在运行的 URL。 如果您的应用是使用 create-react-app 生成的，那么默认的 URL 是 http://localhost:3000/ 。 点击此链接以查看应用。
通过运行/调试配置运行 React 应用程序
对于使用 create-vite 在IntelliJ IDEA 新建项目 向导中 如上所述创建的应用程序，IntelliJ IDEA会生成一个默认名称为 npm start 的 npm配置。 此配置会运行 react-scripts start 命令，启动开发服务器，并以开发模式启动您的应用。
在其他情况下，您需要手动 创建一个运行/调试配置 ，并设置实际的参数，如主机、端口等。
创建一个 npm 运行/调试配置
前往 。 或者，在工具栏上的 运行 小部件中选择 编辑配置。
在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（
），然后从列表中选择 npm。在打开的 配置 对话框的 运行/调试配置：npm 选项卡中，指定 package.json 、Node.js 运行时以及要使用的包管理器的位置。
在 命令 字段中，从列表中选择 运行 ，然后在 脚本 列表中选择要运行的脚本。 它很可能是默认的
start脚本，但您也可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用。
可选：
要在浏览器中打开应用程序，请按照以下步骤更新配置：在 浏览器 / 实时编辑 选项卡中，选中 在启动后 复选框，选择要在其中打开应用程序的浏览器，并指定应用程序将运行的 URL 地址。
如果您打算调试该应用，请选择 Google Chrome 或其他 基于 Chromium 的浏览器。
运行应用程序
在工具栏的列表中选择 npm start 运行配置，并点击其旁边的
。
请等待应用编译完成且开发服务器就绪。
在 运行 工具窗口或 终端 中会显示您的应用正在运行的 URL。 点击此链接以查看应用。
或者，启用 IntelliJ IDEA 以在启动时打开应用程序 如上所述。
调试 React 应用程序
您可以通过 启动运行/调试配置或 从运行工具窗口 ，该窗口显示您的应用程序在开发模式下运行的 URL，开始调试会话。
通过运行/调试配置开始调试
要调试您的 React 应用程序，您需要两个运行/调试配置：
在开发模式下启动应用程序的 npm 配置， 如上所述。
一个用于将调试器附加到在开发模式下运行的应用的 JavaScript 调试 配置。
您可以在 JavaScript 调试 配置中创建一个 npm 配置，以便一次启动它们，如 使用 npm 运行/调试配置运行和调试 React 应用程序中所述。
或者，分别创建并启动 npm 和 JavaScript 调试 运行/调试配置，如 使用 JavaScript 调试 运行/调试配置开始调试 中所述。
使用单个 npm run/debug 配置运行和调试 React 应用程序
在代码中设置 断点。
创建一个 npm 配置， 如上所述。
如果您使用
create-react-app生成了应用程序，IntelliJ IDEA 已经使用默认名称 npm start 创建了一个 npm 配置。 此配置可通过 运行 小部件或 运行/调试配置 对话框获得。在打开的 配置 对话框的 运行/调试配置：npm 选项卡中，指定 package.json 、Node.js 运行时以及要使用的包管理器的位置。
在 命令 字段中，从列表中选择 运行 ，然后在 脚本 列表中选择要运行的脚本。 它很可能是默认的
start脚本，但您也可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用。在 浏览器 / 实时编辑 选项卡中，选中 在启动后 复选框，从列表中选择 Google Chrome 或其他 Chromium-based browser ，选中 使用 JavaScript 调试器 复选框，然后指定您的应用程序将运行的 URL。
点击 运行。
要重新运行该配置，请在 运行 小部件的列表中选择它，并点击其旁边的
。IntelliJ IDEA 在开发模式下运行应用程序，同时启动调试会话。
当第一个断点被触发时，切换到 调试工具窗口 并按常规方式继续： 逐步执行程序， 停止并恢复程序执行， 在挂起时检查程序 ，探索调用堆栈和变量，设置监视，评估变量， 查看实际的 HTML DOM ，等等。
使用 JavaScript Debug 运行/调试配置开始调试
在代码中设置 断点。
启动应用程序的开发模式 ，如上所述 ，并等待应用程序编译完成以及开发服务器就绪。
在 运行 工具窗口或 终端 中会显示您的应用正在运行的 URL。 请复制此 URL 到 稍后在 JavaScript Debug 配置中指定。
创建一个 JavaScript 调试 配置。 要执行此操作，请在主菜单中转到 ，点击
，然后从列表中选择 JavaScript 调试。在打开的 运行/调试配置：JavaScript Debug 对话框中，指定配置的名称以及应用程序在开发模式下运行的 URL 地址。 您可以在 运行 工具窗口或 终端 中复制此 URL， 如上所述。
点击 调试。
要重新运行该配置，请在 运行 小部件的列表中选择它，并点击其旁边的
。
当第一个断点被触发时，切换到 调试工具窗口 并按常规方式继续： 逐步执行程序， 停止并恢复程序执行， 在挂起时检查程序 ，探索调用堆栈和变量，设置监视，评估变量， 查看实际的 HTML DOM ，等等。
从 Run 工具窗口或内置 Terminal 开始调试
如果您的应用在 localhost 上以开发模式运行，尤其是在使用 create-react-app 生成的情况下，您可以直接从 运行 工具窗口或内置的 终端 启动调试会话。
在代码中设置 断点。
启动应用程序的开发模式 ，如上所述 ，并等待应用程序编译完成以及开发服务器就绪。
在 运行 工具窗口或 终端 中会显示您的应用正在运行的 URL。 按住 Ctrl+Shift 并点击此 URL 链接。 IntelliJ IDEA 将使用自动生成的类型为 JavaScript 调试 的 配置启动调试会话。
如果您从 新终端 以开发模式启动了您的应用，您只需点击链接旁的 在浏览器中启动调试 按钮。
当第一个断点被触发时，切换到 调试工具窗口 并按常规方式继续： 逐步执行程序， 停止并恢复程序执行， 在挂起时检查程序 ，探索调用堆栈和变量，设置监视，评估变量， 查看实际的 HTML DOM ，等等。
构建一个 React 应用程序
如果您 在现有的 IntelliJ IDEA 项目中安装了 React ，需要设置构建过程。 了解各种为您的 React 应用配置构建流水线的方法，详情请参阅 React 官方网站。
测试 React 应用程序
您可以在 使用 create-vite 创建的 React 应用程序中运行和调试 Jest 测试。 在开始之前，请确保 react-scripts 包已添加到您的 dependencies 对象中 package.json 。
您可以直接从编辑器、 项目 工具窗口或者通过运行/调试配置来运行和调试 Jest 测试。 更多信息请参阅 Jest。
从编辑器运行测试
点击装订区域中的
或 
，并从列表中选择 运行 <test_name>。
您还可以在编辑器中查看测试是否通过或失败，由于装订区域的 测试状态图标
和 
。
创建 Jest 运行/调试配置
打开 运行/调试配置对话框（ 在主菜单中），点击
在左侧窗格中，然后从列表中选择 Jest。 运行/调试配置：Jest 对话框将打开。指定要使用的 Node.js 运行时以及应用程序的工作目录。 默认情况下， 工作目录 字段显示项目根文件夹。 若要更改此预定义设置，请指定所需文件夹的路径。
在 Jest 包 字段中，指定 react-scripts包的路径。
在 Jest 选项 字段中，输入
--env=jsdom。
运行测试
从配置列表中选择 Jest 运行/调试配置，然后在列表或工具栏中点击
 。在 测试运行器 选项卡的 运行 工具窗口中监控测试执行并分析测试结果。 有关详细信息，请参考 探索测试结果。
调试测试
从主工具栏的列表中选择 Jest 运行/调试配置，并点击右侧的
 。在打开的 调试工具窗口 中，按常规方式进行操作： 单步执行程序、 停止并恢复程序执行、 在暂停时检查 、查看调用堆栈和变量、设置监视、评估变量、 查看实际的 HTML DOM 等。
已知限制
当您在调试会话期间第一次打开应用程序时，可能会发生代码在页面加载时执行的一些断点未被触发。 原因是若要在原始源代码中停在断点处，IntelliJ IDEA 需要从浏览器中获取 source maps。 然而，浏览器只能在页面至少完全加载一次后才能传递这些 source maps。 作为一种解决方法，您可以自己在浏览器中重新加载该页面。
在一个项目中使用多个框架
有时，您可能需要在一个 React 项目中使用其他框架。
要在每个文件中获得上下文感知的编码辅助，请创建一个配置文件 .ws-context ，并指定每个特定文件或文件夹应使用的框架。 该文件中的设置将覆盖默认配置。
在项目根目录中，从上下文菜单中选择 新建 | 文件 并将文件名指定为
.ws-context。在
.ws-context中，使用两种属性：<context-name>带有上下文值字符串具有上下文详情对象的 GLOB 模式
使用以下上下文值：
framework：vue、angular、react、svelte、astroangular-template-syntax：V_2、V_17nextjs-project：nextjsastro-project：astrovue-store：vuex、piniavue-class-component-library：vue-class-component、vue -property-decorator、vue-facing-decoratorjsdoc-dialect：jsdoc-typescript、jsdoc-closure
使用路径嵌套以简化操作。
GLOB 路径的最后一段是文件名模式，它仅支持
*通配符。如果最后一个段是一个
**，它匹配所有嵌套的目录和文件。顶层上下文属性应具有
/**模式。
当多个模式匹配相同文件名时，将使用以下规则进行消歧：
选择路径段数最多的模式，排除
**段。选择纯文件名模式，这意味着它不会以
**或/结尾。选择最先定义的模式。
示例
假设您有一个项目，其中在各个文件夹中使用了多个框架。
要为项目中的每个文件获得上下文相关的帮助，请将以下代码添加到 .ws-context: