Tips & Tricks
FOMO 摘要 #2：使用 JetBrains IDE 进行 Angular 开发的 5 大提示
无论您对 Angular 有多熟悉，对它感觉如何，JetBrains IDE 都可以让您在这个框架上的体验更好。在今天的 FOMO 摘要中，我们将告诉您在 WebStorm、IntelliJ IDEA Ultimate、PhpStorm、Rider、PyCharm Professional、GoLand 和 RubyMine 等 JetBrains IDE 中可以找到的 Angular 功能。
以下是我们将介绍的内容：
以下使用的所有键组合均来自 macOS 和 Windows/Linux 的默认按键映射。如果没有分配默认快捷键，您可以自行分配。
向高级用户学习
想了解 Angular 高级用户设置 IDE 的方式以及使用的功能吗？观看这段视频，高级用户 Chau Tran 分享了他的最佳提示和技巧。
学习如何使用键盘
您可以找到 IDE 中几乎所有操作的键盘快捷键。前往 Preferences / Settings | Keymap（偏好设置 / 设置 | 按键映射）查看。如果有按建设定让您感觉不太方便，您可以根据偏好进行自定义。例如，让打开 Terminal（终端）工具窗口的快捷键更好记：
额外提示：您可以安装 Key Promoter X 插件，在工作时学习核心快捷键。
使用 IDE 功能更快导航
Angular 项目会迅速变得庞杂。以下三个功能可以帮助您找到解决方法。
Search Everywhere（随处搜索）：⇧⇧ / Shift+Shift
如果您只需要记住一个快捷键，那它就应该是 Search Everywhere（随处搜索）。您可以使用它来查找任何文件、操作、类或符号，并在一个地方查看所有匹配项。您甚至可以使用它来搜索选择器。
额外提示：您还可以在 Search Everywhere（随处搜索）中包含文本搜索结果。转到 Preferences / Settings | Advanced Settings（偏好设置 / 设置 | 高级设置）并勾选 Show text search results in Search Everywhere（在“随处搜索”中显示文本搜索结果）选项。
Related Symbol（相关符号）：⌃⌘↑ / Ctrl+Alt+Home
处理 Angular 项目时，在不同组件文件之间跳转经常很有用。最快的方式之一是按 ^⌘Up / Ctrl+Alt+Home。IDE 将显示 Related Symbol（相关符号）弹出窗口，其中包含相关文件列表。在 TypeScript 组件文件中，弹出窗口还将列出导入该文件的所有符号。
额外提示：您可以安装 Angular CLI QuickSwitch 插件，使用 ⌥S / Alt+S 在一个组件的各种文件之间切换。
Recent Files（最近的文件）：⌘E / Ctrl+E
您可以使用 ⌘E / Ctrl+E 返回最近处理的文件。此快捷键还允许您跳转到各种工具窗口，如 npm 或 Terminal（终端）。
额外提示：您可以在 macOS 上使用 ⌘[ 和 ⌘] 以及在 Windows 和 Linux 上使用 Ctrl+Alt+左箭头键/Ctrl+Alt+右箭头键在正在处理的内容之间导航。它不仅会转到文件，还会转到您离开文件时的位置。
不要手动重构代码
我们的 JetBrains IDE 具有出色的重构功能。来看看它们如何帮助您在整个项目中进行更改时节省时间。
提取 Angular 组件：[可分配的快捷键]
我们将从一个精彩的重构开始，它允许您从模板提取 Angular 组件。要开始使用，首先选择要提取的代码段，点击右键打开上下文菜单，然后转到 Refactor | Extract Component（重构 | 提取组件）。
额外提示：您可以为此重构分配快捷键。转到 Preferences / Settings | Keymap（偏好设置 / 设置 | 按键映射），搜索“extract component”（提取组件），然后为此操作分配快捷键即可。
“重命名”重构：⇧F6 / Shift+F6
另一个要提到的重构是有史以来最受欢迎的重构之一。需要在整个项目中重命名某些内容时，您可以将这个任务交给 IDE。选择要重命名的符号，点击右键打开上下文菜单，然后转到 Refactor | Rename（重构 | 重命名），或者，您也可以使用快捷键 ⇧F6 / Shift+F6。重命名适用于许多符号，包括自定义事件处理程序、类名和 Angular 组件中定义的方法。
额外提示：如果您改变了主意并想恢复到先前的状态，可以使用 ⌘Z / Ctrl+Z 还原更改。
这里只重点介绍这两个重构。要详细了解其他重构，请查看我们的文档。记得经常调用 Refactor This（重构）弹出窗口 (^T / Ctrl+Alt+Shift+T)，它会显示当前可用的所有重构！
尽可能自动执行一切
您始终可以依靠 JetBrains IDE 协助完成繁重作业。下面介绍三种方式以供参考。
自动导入
您花在确保将所有内容导入项目以使其正常工作的时间都可以用在编码上。您的 IDE 可以处理项目中定义的任何
@Component 或类的所有 import 语句。⇧⌘Enter / Alt+Shift+Enter 是一次性导入文件中所有模块的好方式。
额外提示：您可以根据偏好配置导入样式。查看这篇博文了解如何操作。
创建 Angular 组件
您很有可能会在 Angular 项目中创建大量组件。您可以右键点击要添加到的位置并选择 New | Angular Schematic（新建 | Angular 示意图）来创建新组件。选择 component（组件）选项，为其命名，IDE 将处理其余部分并创建整个组件。如果您需要在子文件夹的深处安装组件，这可以节省大量时间。
额外提示：在名称末尾添加“-”后，您将看到该组件可用的其他选项。
代码检查
撰写本文时，JetBrains IDE 包含 19 项特定于 Angular 的检查，可以帮助您编写出色代码。检查将让您了解到代码中的问题，并且在很多情况下 IDE 会建议快速修复。
额外提示：现在，无需更改严重性级别即可配置检查在编辑器中的显示方式。在 Preferences / Settings | Editor | Inspections（偏好设置 / 设置 | 编辑器 | 检查），您可以使用 Highlighting in editor（编辑器中的高亮显示）下拉菜单更改检查高亮显示样式。
希望您喜欢本期 FOMO 摘要并学到新知识。请告诉我们您感兴趣的内容！如果您想看到自己喜欢的功能，也请在下方评论区中分享。
WebStorm 团队
本博文英文原作者：
Prev post FOMO 摘要 #1：JetBrains IDE 中适用于 JavaScript 开发的新功能在 WebStorm 和其他 JetBrains IDE 中获得 Vim 的强大功能 Next post
Subscribe to WebStorm Blog updates
