React
React 是一个 JavaScript 库，用于通过封装组件构建复杂的交互式用户界面。 您可以通过 React 官方网站 了解该库的详细信息。
WebStorm 与 React 集成，提供配置、编辑、语法检查、运行、调试与维护应用方面的支持。
开始之前
创建新的 React 应用
推荐的方式是使用 create-vite 包启动新的 React 单页应用，WebStorm 将使用 npx 下载并运行该包。 这样，您的开发环境将预先配置为使用 Vite 结合 React 和 TypeScript，详情请参阅 Vite 官方网站。
使用 create-vite 生成 React 应用
在 欢迎 屏幕上点击 新建项目 ，或在主菜单中选择 。 将打开 新建 项目 对话框。
在左侧窗格中选择 Vite。
在右侧窗格中：
指定用于存储项目相关文件的文件夹路径。
在 Node 解释器 字段中指定要使用的 Node.js 解释器。 从列表中选择已配置的解释器，或选择 添加 配置新解释器。
在 Vite 列表中选择 npx create-vite。
在 模板 列表中选择
react。可选：
如需使用 TSX 而非 JSX，请选中 创建TypeScript 项目(T) 复选框。 WebStorm 将为您的应用生成 .tsx 文件以及一个 tsconfig.json 配置文件。
点击 创建 时，WebStorm 会生成一个针对 React 的项目，包含所有必要的配置文件并下载所需依赖项。 WebStorm 还将创建带有默认设置的 npm start 和 JavaScript Debug 配置，以运行或调试您的应用。
在空 WebStorm 项目中安装 React
在此情况下，您需要按照下文 构建 React 应用 中所述自行配置构建流水线。 有关将 React 添加到项目的详细信息，请参阅 React 官方网站。
创建空 WebStorm 项目
在 欢迎 屏幕上点击 新建项目 ，或在主菜单中选择 。 将打开 新建 项目 对话框。
在左侧窗格中选择 空的 项目。 在右侧窗格中指定应用文件夹，然后点击 创建。
在空项目中安装 React
打开要使用 React 的空项目。
在嵌套的 终端 （Alt+F12 ）中，键入：
npm install --save react react-dom
从现有 React 应用开始
要继续开发现有的 React 应用，请在 WebStorm 中打开它，并下载所需的依赖项。
打开您的计算机上已有的应用源代码
在 欢迎 界面上点击 打开 ，或从主菜单中选择 。 在打开的对话框中，选择存储源代码的文件夹。
从版本控制中检出应用源代码
在 欢迎 界面上点击 克隆版本库克隆。
或者，从主菜单中选择 、 或 。
在主菜单中，可能会显示与项目关联的其他版本控制系统，而不是 Git。 例如， Mercurial 或 Perforce。
在打开的对话框中，从列表中选择您的版本控制系统，并指定用于检出应用源代码的存储库。 有关更多信息，请参阅 签出项目（克隆）。
下载依赖项
在弹出窗口中点击 运行 'npm install' 或 运行 'yarn install'：
您可以使用 npm、 Yarn 1 或 Yarn 2 ，详细信息请参阅 npm 和 Yarn。
或者，在编辑器或 项目 工具窗口中的 package.json 上的内容菜单中选择 运行 'npm install' 或 运行 'yarn install' Alt+1。
项目安全性
当您打开一个在 WebStorm 外部创建并导入到其中的项目时，WebStorm 会显示一个对话框，您可以在其中决定如何处理该包含不熟悉源代码的项目。
请选择以下选项之一：
在安全模式中预览 ：在这种情况下，WebStorm 以预览模式打开项目。 这意味着您可以浏览项目源代码，但无法运行任务和脚本，或运行／调试项目。
WebStorm 会在编辑器区域顶部显示通知，您可以随时点击 信任项目… 链接来加载项目。
信任项目 ：在这种情况下，WebStorm 会打开并加载项目。 这表示项目已初始化、插件已解析、依赖项已添加，所有 WebStorm 功能均可用。
不打开 ：在这种情况下，WebStorm 不会打开项目。
请参阅 项目安全性 了解更多信息。
代码补全
WebStorm 为 JavaScript 代码中的 React API 和 JSX 提供代码补全功能。 代码补全适用于 React 方法、React 特定属性、HTML 标签与组件名称、 React 事件 、组件属性等。 详细信息请参阅 React 官方网站。
要获得 React 方法和 React 特定属性的代码补全功能，您需要在项目中包含 react.js 库文件。 该库通常位于 node_modules 目录中。
自动补全 React 方法、属性与事件
默认情况下，在键入时会自动显示代码补全弹窗。 例如：
在 JSX 标签中，WebStorm 提供对 React 特定属性 （例如 className 或 classID ）以及 非 DOM 属性 （例如 key 或 ref ）的编码辅助。 此外，也能自动补全项目 CSS 文件中定义的类名：
所有 React 事件 （如 onClick 或 onChange ）也可自动补全，包括大括号 ={} 或引号 ""。
默认插入大括号。 您可以设置 WebStorm 始终添加引号，或根据 TypeScript 定义文件（d.ts） 中的类型在引号和花括号之间进行选择。 要更改默认设置，请打开 设置 对话框（Ctrl+Alt+S ），进入 ，并从 为 JSX 属性添加 列表中选择所需选项。
代码补全功能同样适用于大括号中的 JavaScript 表达式。 这适用于您定义的所有方法和函数：
补全 HTML 标签与组件名称
WebStorm 提供对在 JavaScript 方法或其他组件中定义的 HTML 标签和组件名称的代码补全功能：
代码补全也支持使用 ES6 语法导入的组件：
补全组件属性
WebStorm 提供对使用 propTypes 定义的组件属性的代码补全功能，并可解析以便快速跳转或预览这些属性的定义：
当您完成组件名称补全时，WebStorm 会自动添加其所有必需属性。 如果使用组件时缺少某些必需属性，WebStorm 会发出警告。
将 HTML 属性转换为 JSX
当您将包含类属性或 on-event 事件处理器的 HTML 代码粘贴到 JSX 中时，WebStorm 会自动将这些属性替换为 React 特定属性（className、 onClick、 onChange 等）。
这也适用于 TSX：
当您将包含单标签的 HTML 代码粘贴到 JSX 中时，WebStorm 会自动在每个单标签的末尾添加斜杠 /。
要将 HTML 代码按原样粘贴到 JSX 或 TSX 中，请使用 简易粘贴 Ctrl+Alt+Shift+V ，或打开 设置 对话框（Ctrl+Alt+S ），转到 设置页面，并取消选中 将代码粘贴到 JSX 文件时关闭 HTML 单标签 和 将 HTML 属性名称转换为 JSX 文件格式 复选框。
React 代码片段
WebStorm 附带了超过 50 个代码片段集合，这些片段可展开为 React 应用中常用的不同语句和代码块，包括 React Hooks。 以下示例展示了如何使用缩写 rcjc 创建一个定义新 React 组件的类：
通过片段创建 React 代码结构
在编辑器中键入所需的缩写，然后按 Tab。
按 Ctrl+J 并选择相关代码片段。 要缩小搜索范围，请开始输入缩写，然后从 completion list 中选择它。
有关更多信息，请参阅 Live Templates。
查看所有可用 React 代码片段列表
在 设置 对话框（Ctrl+Alt+S ）中，点击 实时模板 ，位于 编辑器 下，然后展开 React 或 React 钩子 节点。
JSX 中使用 Emmet
使用 WebStorm，您不仅可以在 HTML 中使用 Emmet ，还可以在 JSX 代码中借助一些 React 专属语法进行使用。 例如，缩写 div.my-class 在 JSX 中会展开为 <div className=”my-class"></div> ，而不是像在 HTML 中那样展开为 <div class=”my-class"></div>：
浏览 React 应用
除了 basic navigation 之外，WebStorm 还可帮助您跳转到 React 特有的代码元素。
要跳转到大括号
{}中的方法或 JavaScript 表达式的声明处，请选中方法或表达式并按 Ctrl+B。要跳转到组件声明处，请选中组件名称并按 Ctrl+B。
要查看组件定义，请按 Ctrl+Shift+I。 详细了解请参阅 定义与类型定义。
要查看组件的快速文档，请按 Ctrl+Q。 详细了解请参阅 查阅 JavaScript 文档。
Lint React 应用
所有 WebStorm 内置的 JavaScript 和 HTML code inspections 也适用于 JSX 代码。 WebStorm 会在存在未使用的变量和函数、缺少的结束标签、漏写的语句等情况下发出警告。
对于某些检查，WebStorm 提供快速修复，例如建议添加缺失的方法。 要查看快速修复弹出窗口，请按 Alt+Enter。
要自定义检查列表，请打开 设置 对话框（Ctrl+Alt+S ），转到 Editor | Inspections，然后禁用不希望显示的检查项，或更改其严重级别。 详细了解请参阅 禁用与启用检查 与 更改代码检查严重性。
ESLint
除了提供内置代码检查外，WebStorm 还与 JSX 代码的 linter 如 ESLint 集成。 ESLint 提供了丰富的 lint 规则，并可通过插件进行扩展。 WebStorm 会在您输入时，直接在编辑器中显示由 ESLint 报告的警告和错误信息。 结合 ESLint，您还可以使用 JavaScript Standard Style ，以及 lint your TypeScript code。
有关更多信息，请参阅 ESLint。
要让 ESLint 正确解析 React JSX 语法，您需要 eslint-plugin-react。 安装该插件后，例如当未为 React 组件设置 display name 或使用某些危险的 JSX 属性时，系统会发出警告：
在 React 项目中安装并配置 ESLint
在内置的 终端 （ ）中，输入：
npm install --save-dev eslint npm install --save-dev eslint-plugin-react将一个 ESLint configuration file 添加到您的项目中。
在 设置 对话框（Ctrl+Alt+S ）中，转到 语言与框架 | JavaScript | 代码质量工具 | ESLint 并选择 自动 ESLint 配置。 WebStorm 将自动在您的项目 node_modules 文件夹中定位 ESLint，然后使用 .eslintrc.* 文件或
eslintConfig属性中的默认配置，位于 package.json 中。或者，选择 手动 ESLint 配置 以使用自定义的 ESLint 包和配置。
.eslintrc 结构示例（ESLint 1.x，带 react 插件）
在
ecmaFeatures对象中添加"jsx" = true。 在这里，您还可以指定想使用的其他语言功能，例如 ES6 class、module 等。在
plugins对象中添加react。在
rules对象中，您可以列出要启用的 ESLint built-in rules ，以及通过 react plugin 提供的规则。{ "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 官方网站了解有关 ESLint 和 react 插件配置的更多信息。
在 React 应用中重构代码
除了 常见的 WebStorm 重构操作 ，在 React 应用中，您还可以对 React 组件执行 Rename ，并使用 Extract Component来创建新组件。
重命名组件
以下是对仅在一个文件中定义和使用的组件进行重命名的示例：
同样，您也可以重命名在一个文件中定义并通过命名导出导入到另一个文件中的组件：
将光标置于组件名称内，按下 Shift+F6 或在上下文菜单中选择 。
请按照 React 命名约定指定新组件名称。
重命名状态值
当您重命名状态值时，WebStorm 会建议同时重命名对应的设置函数（即在 React useState hook中更新该状态值的函数）。
将光标置于状态值名称内，按下 Shift+F6 ，或从主菜单或上下文菜单中选择 。
指定新值名称并按下 Enter。 焦点将移动到设置函数，并建议新的状态值名称。 按 Enter 接受建议。
提取组件
您可以通过从现有组件的 render 方法中提取 JSX 代码来创建新的 React 组件。 新组件可以定义为函数或类，详情请参阅 React 官网的 函数组件与类组件。
选择要提取的代码，并从上下文菜单中选择 。
或者，在主菜单中转到 ，或者按 Ctrl+Alt+Shift+T ，并从弹出窗口中选择 提取组件。
在打开的对话框中指定新组件的名称及其类型。 默认情况下，将创建一个函数式组件。 如果您希望将新组件定义为类组件，请选择 类。
点击 确定。 新组件将定义在现有组件旁边，并在其中使用该组件。
可选：使用 Move Symbol 重构将新组件和所有所需的 import 移动到单独的文件中。
可选：修改 WebStorm 用于新组件的代码模板。 在 设置 对话框（Ctrl+Alt+S ）中，前往 ，打开 代码 选项卡，并根据需要使用 Apache Velocity 模板语言更新模板。
将函数转换为类组件
使用 Convert to Class Component重构操作时，WebStorm 会用您要转换的函数名生成一个 ES6 类。 该类继承自 React .Component ，并包含一个 render() 方法，用于承载函数体的内容。 详见 React 官方网站。
将光标放置在要转换的函数内任意位置，并在主菜单或上下文菜单中选择 。
或者，按下 Ctrl+Alt+Shift+T 并在弹出窗口中选择 转换为类组件。
将类转换为函数式组件
使用 Convert to Functional Component重构操作时，WebStorm 会生成一个函数，其名称与您要转换的类相同，并将 render() 方法中的内容移动到函数体中。
将光标放置在要转换的类内任意位置，并在主菜单或上下文菜单中选择 。
或者，按下 Ctrl+Alt+Shift+T 并在弹出窗口中选择 转换为函数式组件。
在 React 应用中使用解构
解构赋值可以轻松地将数组和对象中的值解包到变量中。 该功能具有非常简洁的语法，在需要在应用程序中传递数据时经常使用。
在使用 React 类组件时，建议使用 Introduce object/array destructuring意图操作。 详见 JavaScript 中的解构赋值。
运行 React 应用
点击
（位于 start中 package.json 脚本旁边的边距位置），或在 终端 中的 Alt+F12 中执行npm run start命令，或在 npm 工具窗口 （ ）中双击start任务。
等待应用程序编译完成并启动开发服务器。
运行 工具窗口或 终端 将显示应用程序当前运行的 URL。 如果您的应用程序是通过 create-react-app 生成的，默认 URL 为 http://localhost:3000/ 。 点击此链接即可查看应用程序。
通过运行／调试配置运行 React 应用
对于通过 WebStorm 向导中的 create-vite新建项目 创建的应用程序 （如上所述） ，WebStorm 会生成名为 npm start 的默认 npm配置。 该配置会运行 react-scripts start 命令，启动开发服务器并以开发模式启动您的应用程序。
在其他情况下，您需要手动 创建运行/调试配置 ，并设置实际参数，例如主机、端口等。
创建 npm 运行／调试配置
转到 。 或者，也可以从工具栏的 运行 小部件中选择 编辑配置。
在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（
），然后从列表中选择 npm。在打开的 运行/调试配置：npm 对话框的 配置 选项卡中，指定 package.json 、Node.js 解释器和要使用的包管理器的位置。
在 命令 字段中，从列表中选择 运行 ，然后从 脚本 列表中选择要运行的脚本。 这通常是默认的
start脚本，您也可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用程序。
可选：
要在浏览器中打开应用程序，请按如下方式更新配置：在 浏览器／实时编辑 选项卡中，选中 启动后 复选框，选择用于打开应用程序的浏览器，并指定应用程序将运行的 URL 地址。
如果您打算调试应用程序，请选择 Google Chrome 或其他 基于 Chromium 的浏览器。
运行应用
在工具栏列表中选择 npm start 运行配置，然后点击其旁边的
。
请等待应用程序编译完成并使开发服务器就绪。
运行 工具窗口或 终端 显示您的应用程序正在运行的 URL。 点击此链接以查看应用程序。
或者，启用 WebStorm 以在启动时打开应用程序 （如上所述）。
调试 React 应用
您可以通过 启动运行/调试配置 或从显示应用程序在开发模式下运行 URL 的 “运行”工具窗口 启动调试会话。
通过运行／调试配置开始调试
要调试 React 应用程序，您需要两个运行/调试配置：
一个 npm 配置用于在开发模式下启动应用程序， 如上所述。
一个 JavaScript 调试 配置用于将调试器附加到正在开发模式中运行的应用程序。
您可以在 npm 配置中创建 JavaScript 调试 配置，按 使用 npm 运行/调试配置运行并调试 React 应用程序 中所述一次性启动它们。
或者，分别创建并启动 npm 和 JavaScript 调试 运行/调试配置，按 通过 JavaScript Debug 运行/调试配置开始调试 中所述执行操作。
使用单个 npm 运行／调试配置运行并调试 React 应用
在代码中设置 断点。
创建一个 npm 配置， 如上所述。
如果您使用
create-react-app生成了应用程序，WebStorm 已经创建了一个默认名称为 npm start 的 npm 配置。 该配置可通过 运行 小部件以及 运行/调试配置 对话框访问。在打开的 运行/调试配置：npm 对话框的 配置 选项卡中，指定 package.json 、Node.js 解释器和要使用的包管理器的位置。
在 命令 字段中，从列表中选择 运行 ，然后从 脚本 列表中选择要运行的脚本。 这通常是默认的
start脚本，您也可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用程序。在 浏览器／实时编辑 选项卡中，选中 启动后 复选框，从列表中选择 Google Chrome 或其他 基于 Chromium 的浏览器 ，勾选 使用 JavaScript 调试器 复选框，然后指定应用程序将运行的 URL。
点击 运行。
要重新运行配置，请从 运行 小部件中的列表中选择该配置，然后点击其旁边的
。WebStorm 会在开发模式下运行应用程序，同时启动调试会话。
当第一个断点被触发后，切换到 调试工具窗口 并按常规方式执行： 单步执行程序、 暂停并恢复 程序执行、 在挂起时检查程序 ，查看调用堆栈和变量、设置监视、评估变量、 查看实际 HTML DOM ，等等。
使用 JavaScript Debug 运行/调试配置开始调试
在代码中设置 断点。
以 如上所述 的方式在开发模式下启动应用程序，并等待其编译完成且开发服务器就绪。
运行 工具窗口或 终端 显示您的应用程序正在运行的 URL。 将该 URL 复制，以便 稍后在 JavaScript Debug 配置中指定。
创建一个 JavaScript 调试 配置。 为此，进入主菜单中的 ，点击
，然后从列表中选择 JavaScript 调试。在打开的 运行/调试配置：JavaScript 调试 对话框中，指定配置名称以及应用程序在开发模式下运行的 URL 地址。 您可以在 运行 工具窗口或 终端 中复制此 URL， 如上所述。
点击 调试。
要重新运行配置，请从 运行 小部件中的列表选择该配置，并点击其旁边的
。
命中第一个断点时，切换到 调试工具窗口 ，然后照常操作： 逐步执行程序、 暂停并恢复程序执行、 在挂起时检查程序 ，探索调用堆栈和变量，设置监视表达式，计算变量， 查看实际 HTML DOM等。
从运行工具窗口或内置终端开始调试
如果您的应用在 localhost 处于开发模式运行，尤其是使用 create-react-app 生成的，则可通过 运行 工具窗口或内置的 终端 直接启动调试会话。
在代码中设置 断点。
按照上述说明以开发模式启动应用，并等待编译完成以及开发服务器就绪。
运行 工具窗口或 终端 将显示您的应用运行的 URL。 按住 Ctrl+Shift 并单击该 URL 链接。 WebStorm 会使用自动生成的类型为 JavaScript Debug 的 配置启动调试会话。
如果您是从 新终端中以开发模式启动的应用，您可以直接点击链接旁的 在浏览器中开始调试 按钮。
命中第一个断点时，切换到 调试工具窗口 ，然后照常操作： 逐步执行程序、 暂停并恢复程序执行、 在挂起时检查程序 ，探索调用堆栈和变量，设置监视表达式，计算变量， 查看实际 HTML DOM等。
构建 React 应用程序
如果 在现有 WebStorm 项目中安装了 React ，则需要配置构建过程。 请访问 React 官方网站了解为 React 应用配置构建流程的多种方式。
测试 React 应用程序
您可以在 使用 create-vite 创建的 React 应用中运行并调试 Jest 测试。 开始之前，请确保 react-scripts 包已添加到 dependencies 对象的 package.json 中。
您可以直接在编辑器中，或通过 项目 工具窗口，或使用运行/调试配置来运行和调试 Jest 测试。 有关详细信息，请参阅 Jest。
从编辑器运行测试
单击边栏中的
或 
，并从列表中选择 运行 <test_name>。
您还可以在编辑器中直接查看测试是否通过或失败，这要归功于 测试状态图标
和 
显示在边栏中。
创建 Jest 运行/调试配置
打开 运行/调试配置对话框（主菜单中的 ），在左侧窗格中点击
，然后从列表中选择 Jest。 将会打开 运行/调试配置：Jest对话框。指定要使用的 Node 解释器及应用的工作目录。 默认情况下， 工作目录 字段显示项目根目录。 要更改该预定义设置，请指定所需文件夹的路径。
在 Jest 包 字段中，指定 react-scripts包的路径。
在 Jest 选项 字段中，输入
--env=jsdom。
运行测试
从配置列表中选择 Jest 运行/调试配置，然后点击列表中或工具栏上的
。
在 测试运行器 标签页的 运行 工具窗口中监视测试执行并分析测试结果。 有关详细信息，请参阅 查看测试结果。
调试测试
从主工具栏的配置列表中选择 Jest 运行/调试配置，然后点击右侧的
。在打开的 调试工具窗口 中照常操作： 逐步执行程序、 暂停并恢复程序执行、 在挂起时检查程序 ，探索调用堆栈和变量，设置监视表达式，计算变量， 查看实际 HTML DOM等。
已知限制
首次在调试会话中打开应用时，可能某些在页面加载期间执行的代码中的断点未被命中。 这是因为要在原始源代码中停在断点处，WebStorm 需要从浏览器获取 source map。 然而，浏览器只能在页面至少完全加载一次后才传递这些 source map。 解决方法是手动在浏览器中重新加载该页面。
在项目中使用多个框架
有时，您可能需要在一个 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 中：