FOMO 摘要 #3：JetBrains IDE 中适用于 React 开发的 7 大功能
欢迎来到我们 FOMO 摘要系列的第三部分，其中汇集了 WebStorm 和其他 JetBrains IDE 中最实用的有助于提升工作效率的提示。 今天，我们将介绍一些适用于处理 React 的最棒功能。 所有功能都在 JetBrains IDE 中开箱即用。
复制和粘贴时重新 React 化 HTML
我们从受到许多用户喜爱的超级实用小功能开始。
#WebStormTip – Pasting HTML into a React project will convert `class` into `className` 🤯
— alistair (@alistaiiiir) February 15, 2021
没错！ 每当您将 HTML 代码粘贴到 React 组件中时，IDE 都会自动进行转换，使其遵循正确的 React 约定。
在此示例中，class 被转换为 className。 IDE 还将转换事件处理程序，例如将 onclick 更改为 onClick。 有关详情，请参阅我们文档中的将 HTML 特性传输到 JSX部分。
提取 React 组件
您是否在想办法实现 React zen 和组件驱动型应用程序的承诺？ 创建组件型驱动应用程序的过程相当繁琐：需要移动 JSX、识别必要 props（可能带有类型）、调用新组件等。
把这项工作交给 IDE 吧！ 首先，选择要转换为子组件的 JSX。 然后，使用 Refactor This（重构此）弹出窗口 (^T / Ctrl+Alt+Shift+T)，选择 Extract Component…（提取组件…）。 接下来，对其进行命名，使之成为类或函数即可。
想要遵循单一职责原则，让每个文件只有一个组件吗？ 可以使用 Move（移动）重构将新组件及其所需的所有 import、数据和输入提取到单独的新文件。
额外提示：您可以将 React 类组件转换为函数组件，然后再转换回来。 在组件定义上按 ⌥Enter / Alt+Enter 并选择所需操作即可。 另外，如果您改变主意，一次“撤消”(⌘Z / Ctrl+Z) 就能将一切复原。
使用 React 代码段
JetBrains IDE 中提供了大量React 代码段，可以帮助您节省时间。 超过 50 种缩写可扩展为 React 项目的不同语句和代码块，您几乎不需要从头编写任何内容。
要使用这些片段，只需在编辑器中输入缩写，然后按 ⇥ /Tab 将其展开。 您还可以使用 Insert Live Template（插入实时模板）添加代码段。 按 ⌘J / Ctrl+J 并从列表中选择要插入的代码段。
您可以在 Preferences / Settings | Editor | Live Templates（偏好设置/设置 | 编辑器 | 实时模板）下找到 React 可用模板的完整列表。
额外提示：您可以转到 Preferences / Settings | Editor | File and Code Templates（偏好设置/设置 | 编辑器 | 文件和代码模板）并选择 Code（代码）选项卡，修改 IDE 用于新组件的代码模板。
浏览 React 项目
WebStorm 和其他 JetBrains IDE 可以帮助您浏览符号，例如 JSX 标记，并在编辑器间距中为标记树提供路径导航和彩色高亮显示。
跳转到大括号 {} 内的方法或 JavaScript 表达式的声明也很容易。 只需选择方法或表达式，然后按 ⌘B / Ctrl+B。
额外提示：在 React 中还有其他简洁的导航快捷键，例如 ⌥Space/Ctrl+Shift+I 用于查看组件的定义， F1/Ctrl+Q 用于查看组件的快速文档。
查找代码中的问题
针对 JavaScript 和 HTML 的内置检查范围广泛，适用于整个 React 项目。
例如，IDE 会提醒您未使用的变量和函数、缺少结束标记、缺少语句等。 它还可以帮助您进行清理。 例如，您可以将 IDE 配置为在运行 Reformat Code（⌥⌘L / Ctrl+Alt+L，重新格式化代码）时添加缺少的分号，并使用 Optimize Imports（^⌥O / Ctrl+Alt+O，优化 import）清除所有未使用的 import：
额外提示：可以在 Preferences / Settings | Editor | Inspections（偏好设置/设置 | 编辑器 | 检查）中自定义检查。 禁用多余内容或将严重级别在警告和错误之间切换。
打开 ESLint 集成
WebStorm 和其他 JetBrains IDE 与 ESLint 集成，可供输入时在编辑器中查看报告的警告和错误。 没有为 React 组件设置显示名称或使用了危险属性时，您会收到警告。 此外，ESLint 发现的问题会在 Problems（问题）视图中全局报告。
转到 Preferences / Settings | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint（偏好设置/设置 | 语言和框架 | JavaScript | 代码质量工具 | ESLint），即可启用 ESLint。
额外提示：您可以在每次使用 ⌘S/Ctrl+S 保存项目时运行 ESLint，也可以将其设置为在启动运行/调试配置、关闭 IDE 或执行版本控制操作时自动运行。 要启用此功能，只需勾选 Preferences / Settings（偏好设置/设置）中 ESLint 部分中的选项
从工具窗口启动调试
接下来是一个更高级的提示：您可以从应用程序运行的任何位置开始调试会话。 如果应用程序是在 localhost 上运行，您还可以从内置终端或 Run（运行）工具窗口启动调试器。
Run（运行）和 Terminal（终端）工具窗口会显示应用程序正在运行的 URL，默认为 http://localhost:3000/。 按住 ⌘⇧ / Ctrl+Shift 并点击工具窗口中的 URL 链接。 IDE 将启动调试会话。
希望您喜欢本期 FOMO 摘要并学到新知识。 请告诉我们您感兴趣的内容！ 如果您想看到自己喜欢的功能，也请在下方评论区中分享。
WebStorm 团队
本博文英文原作者：
Subscribe to WebStorm Blog updates
