9 个提高 WebStorm 效率的技巧

WebStorm是一款优秀的 Web 开发集成开发环境 (IDE)。它拥有许多实用功能，旨在简化我们的工作，所有功能都致力于自动化编码中重复性的部分。回想几年前我的编码速度，简直慢得像蜗牛爬。区别不在于我的打字速度，而在于我对所用工具的了解程度。了解工具意味着了解它提供的功能。我总结了那些能最大程度提升编码速度的功能。

实时模板

实时模板可以方便快捷地插入常用代码片段。只需输入缩写并按下 Tab 键，编辑器就会自动添加整个模板。模板中还可以包含占位符：必须填写占位符才能完成插入。

我们来看一个例子。我们采用测试驱动开发（TDD ）方法，编写大量的测试用例。使用 Mocha 和 Jasmine 作为测试框架时，需要插入describe测试it代码块。手动输入这些代码块中的每个字符非常繁琐。

最快捷的方法是为该模块创建一个实时模板describe（缩写de：）。

describe('$TESTGROUP$', function() {
  $END$
});

另外，为该it块创建一个（缩写it：）。

it('should $TESTCASE$', function() {
  $END$
});

占位符以逗号开始和结束$。占位符$END$具有特殊含义：它表示插入内容后光标所在的位置。

搜索所有地方

在大多数集成开发环境 (IDE) 中，搜索项目文件中的文本是一项常见功能，但搜索菜单栏中的操作或声明等其他内容在其他编辑器中却很少见。最棒的是，您只需一个命令即可搜索文件、菜单操作和声明：只需双击按钮Shift即可开始搜索所有位置。

更漂亮

Prettier是一款功能强大的代码格式化工具，支持多种语言，例如 JavaScript、TypeScript、CSS、HTML 等。使用它，您可以节省代码格式化的时间和精力。
您可以通过插件将 Prettier 添加到 WebStorm 中。要实现代码格式化的自动化，您还需要添加一个文件监视器。该文件监视器会监听保存事件，并在事件发生时自动对已保存的文件运行 Prettier 代码格式化。
如果您不喜欢自动代码更新，也可以使用快捷键手动完成。

重构

当代码变得混乱或发现重复部分时，我们通常会进行重构。如果重构后的代码被很多地方使用，就很容易出错。WebStorm内置的重构功能可以帮助我们解决这个问题。如果目标是变量，我们只需单击鼠标即可重命名、提取、内联或将其移动到其他位置。方法也是如此。

多光标编辑

大多数时候，我们会在光标所在的位置直接编辑代码。但有时我们需要在不同的位置进行相同的编辑。最简单的办法是在一个位置编辑，然后复制粘贴到所有需要编辑的位置。更快捷的方法是按住 Alt 键 (⌥) 并点击光标，将光标移动到多个位置。光标会出现在我们点击的所有位置，然后就可以在光标所在位置输入代码了。

一种特殊情况是，当我们想要编辑的位置位于同一列时。此时，我们可以切换到列选择模式：我们可以选择列而不是行，并编辑这些列中的代码。

第三种多光标使用场景是，当我们选择所选文本的所有出现位置（编辑 > 查找 > 选择所有出现位置）时，输入/删除操作会在所有位置发生。

代码导航

如果您使用某个库，并且想要了解该类/函数的具体行为，则必须查找并打开相应的文件。WebStorm让这种导航方式变得更加便捷。按住 Command 键 (⌘) 即可将光标切换到定义显示模式。将鼠标悬停在导入的类/函数上，即可显示其接口。点击悬停的元素即可跳转到相应的定义。您也可以通过按 Command + B 来跳转，而无需使用光标。现在您已经了解了定义，但想要返回到之前的位置。WebStorm 可以跳转到上次编辑的位置 (⌘ + ⌥ + ←)，从而极大地提升代码导航速度。

关键推广者

WebStorm 默认提供了超过 100 个快捷键，几乎涵盖所有操作和代码修改。你都知道这些快捷键吗？反正我不知道。不过，如果你没有使用快捷键，Key Promoter 插件会提醒你。当你执行一些可以通过快捷键完成的操作时，插件会在右下角显示提示信息。

键盘快捷键

推广工具是学习常用快捷键的好方法，但那些你不知道的快捷键怎么办呢？至少通读一遍快捷键列表是值得的。我整理了一份我认为最有用的快捷键列表。

• 删除行 (⌘ + ⌫)
• 上下移动线条（⇧ + ⌥ + ↑ 或 ↓）
• 显示偏好设置（⌘ + ,）
• 复制行或选定内容 (⌘ + D)
• 搜索所有位置（双⇧）
• 展开或收起选区（⌥ + ↑ 或 ↓）
• 列选择模式（⌘ + ⇧ + 8）
• 在路径 (⌘ + ⇧ + F) 中查找
• 替换路径 (⌘ + ⇧ + R)
• 重命名定义或变量（⇧ + F6）
• 前往声明（⌘ + B，⌘ + 点击）
• 前往上次编辑位置（⌘ + ⌥ + ← 或 →）
• 代码补全（⌘ + 空格）
• 多个光标（⌥ + 单击）
• 显示意图（⌥ + ⏎）
• 触发列选择模式（⌘ + ⇧ + 8）
• 显示意图（⌥ + ⏎）
• 注释/取消注释当前行/选定内容 (⌘ + /)
• 重新格式化代码（⌘ + ⌥ + L）
• 选择所有匹配项（^ + ⌘ + G）

我已经列出了 Mac 上的默认快捷键。您可以在参考页面找到 Windows 和 Linux 的对应快捷键。他们甚至还提供了快捷键列表，对不同的列表进行了比较。

内置终端

既然 IDE 内部就有命令行，为什么还要离开 IDE 去使用命令行呢？WebStorm 内置的终端支持多会话，而且可以通过快捷键快速访问。

概括

在这篇文章中，我们列出了许多可以加快开发速度并提高效率的功能。是否使用它们完全取决于您自己。最重要的是了解它们。如果您刚开始使用某个工具，请先学习它的功能。如果您已经使用该工具开发了一段时间，请有条不紊地重新检查其各项功能。因为只有熟练掌握您使用的工具，才能真正提高您的工作效率。