你知道吗？全世界将近 74% 的开发者都使用同一个集成开发环境（Integrated development environment, IDE）。

是的，你没有看错，据全世界最大的开发者问答社区 Stack Overflow 调查结果显示，2023年，全世界开发者使用最多的 IDE 是 Visual Studio Code（73.71%），其占比是第二名（Visual Studio）的将近3倍，遥遥领先👍👍👍！它们都是微软的产品。

它这么流行的原因是什么呢：因为它长得好看（太棒了~）。

但我们是否充分挖掘了它的潜力？正所谓“工欲善其事必先利其器”，在这篇文章中，我将向大家介绍10个关键的 VS Code 功能技巧，比如本地源代码控制、动画输入和快速删除行等，以此提高你的工作效率和编码体验。

1. 时间轴视图：本地源码控制

时间轴视图为我们提供了内置的源代码控制。

我们都知道 Git 和其他源代码控制工具非常有用，可以帮助我们轻松跟踪文件更改并在需要时恢复到以前的某个点。

因此，VS Code 中的时间轴视图（Timeline）可以自动更新与文件相关的重要事件的时间轴，例如 Git 提交、文件保存和测试运行。

展开此视图可以查看与当前文件相关的事件快照列表。在这里是文件保存。

将鼠标悬停在快照项目上可以查看 Visual Studio Code 创建快照的日期和时间。

选择一个快照项目可以查看差异视图，在编辑器中显示在快照时间的文件与当前文件之间的差异。

2. 自动保存：告别 Ctrl + S 快捷键

你能数数使用这个快捷键的次数吗？你现在可能都是无意识地这样做。

自动保存（Autosave）功能会在我们工作时自动保存文件，消除了手动保存的需要。有了自动保存，我们就可以不用再一次次的手动通过 Ctrl + S 快捷键来保存，既可以节省时间，又能消除疲劳（对自己的手指好一些吧😄😄😄），同时确保当前使用的文件始终是最新状态。

自动保存是 VS Code 自带的功能，可以通过以下方式开启：

3. 强大的命令面板：可以做任何事

除了输入之外，几乎在 VS Code 中的任何操作都是“命令（command）”。

命令让我们可以在编辑器内完成各种任务，比如：与文件相关的命令、导航命令、编辑命令和终端命令等，每个命令都经过优化设计，旨在从各个方面增强你的编辑体验。

因此，通过命令面板，我们可以很方便地搜索命令并选择执行相关操作。要打开命令面板，请使用以下快捷键：

Windows/Linux：Ctrl + Shift + P
Mac：Shift + Command+ P

你猜的没错，右侧的这些键盘快捷键是使用键盘更快地运行命令的一种方式。

命令面板相较快捷键的主要优势在于，当存在没有快捷键的命令，或者你在寻找一个不确定是否存在的命令时。

4. 快速查找文件

当你的项目中有数十上百个文件时，如果你想快速找到某个或某类文件，应该怎么办？用鼠标滚动逐一浏览吗？那太慢了。

没错，你确实可以在资源管理器中找到并单击文件，但如果想要更快速的替代方法，请使用 Ctrl + P 快捷键来搜索并打开项目中的特定文件。

按住 Ctrl 并按 Tab 键以在编辑器实例中循环浏览当前打开的文件列表。

此外，你甚至可以使用 Alt + ← 和 Alt + → 在已打开的文件之间快速切换。

以上这些方法都比通过光标的方式更快找到文件。

5. 快速定位到行

在调试期间，如果遇到错误，快速导航到特定行非常有必要，且很有用。跳转到这些造成 bug 的行，你可以检查特定行上下文中的代码，评估变量，并解决问题。

使用 Ctrl + G 快捷键可以实现这一目的。

6. 快速删除行

现在你已经了解如何快速找到行，那如果想快速删除它们该怎么做呢？

你会拖动鼠标并选中然后按 Delete 键吗？还是会不知疲倦地按 Backspace，直到删除所有字符？

事实上，还有一种更快的方法，你可以使用 Ctrl + Shift + K 快捷键，在几秒钟内快速删除当前行和之后的数十行（按住快捷键不放）。

7. 享受流畅的输入

VS Code 具有顺畅的光标功能，将光标移动时会有动画效果，就像在 MS Word 中一样。这使得输入感觉更流畅和精致，同时在我们浏览代码行和将光标放在不同位置时，给我们更流畅、更自然的感觉。

要打开这个设置，只需要在命令面板中打开设置 UI 并搜索“smoot caret”。即可找到“Editor: Cursor Smooth Caret Animation”设置，它有 3 个选项：

off：没有平滑的光标动画
explicit：仅当我们明确将光标放在代码中的某个位置时才会进行动画。
on：始终启用平滑光标动画-包括输入时。

将其设置为 on，即可获得完整的视觉体验。不过，对小编来说，启用这个特性后，好像没什么特别的。

8. 快速格式化代码

格式化主要是通过一种结构化和一致化的方式组织代码来提高代码的可读性。

如果你一直是手动执行这个操作，那么知道这个方法将会很有必要且很有用。

是的，你可以使用“Format Document”命令自动格式化代码，这个命令在“命令面板”中很容易找到。根据当前文件的语言，将使用特定的“默认”格式化程序，使用各种缩进、行长度、大括号等规则对代码进行格式化。

虽然内置的 JS/TS 格式化程序相当不错，但为了更强大更健壮的解决方案，我强烈推荐 Prettier 扩展。

安装完成后，将其设置为默认格式化程序。当你选择手动保存而非自动保存时，你应该启用一个功能，以便格式化更加容易：

Editor: Format On Save："在保存时格式化文件，必须有格式化程序，文件不能在延迟后保存，并且编辑器必须关闭"。默认情况下为禁用状态。

因此，启用此设置后，VS Code 将在你使用 Ctrl + S 保存文件时，使用当前默认格式化程序自动格式化你的代码，像下面这样：

当你启用自动保存（autosave）时，Format On Save 就不会生效，并且在你每次格式化代码时，总是频繁打开命令面板可能会很无聊。因此，这就是使用键盘快捷键的便捷之处了：

Windows：Shift + Alt + F
Mac：Shift + Option + F
Linux：Ctrl + Shift + I

9. 通过多光标编辑节省时间

VS Code 令人惊喜的特性之一就是多光标编辑，它允许你在不同的位置放置多个光标，执行多次插入或删除相同的文本。这大大加快了编辑时间，极大地提高了效率，因为我们可以用这个特性高效地完成重复的任务，从而快速创建代码。

当然，在编辑时，始终至少存在一个光标。可以通过 Alt + 单击 的方式添加更多光标。

您还可以使用 Ctrl + Alt + Down 或 Ctrl + Alt + Up 在当前行的正上方或正下方轻松添加光标。

这些快捷键分别执行添加光标到上面和添加光标到下面的命令。

10. 快速创建新文件夹 / 文件

不存在不需要创建新文件夹和文件的项目，如果有方法可以加速文件/文件夹的创建，那么节省的所有时间累积起来，就可以显著提升我们的生产力。

通常情况下，在 VS Code 中创建新文件和新文件夹都是通过点击对应按钮实现，像这样：

上面这种方式比较常见，大家都知道。那么你知道其实创建新文件还有一种更简单直接方法吗？不用点击新建文件按钮，只需要在资源管理器面板中双击即可：

那么又该如何新建文件夹呢？实际上，文件夹如果没有文件的话毫无意义。在新建文件时，你可以简单地使用 / 字符来表示层次结构，并创建新文件夹和子文件夹来容纳该文件。

总结

Visual Studio Code 不仅仅是一个文本编辑器，它更是一个强大的集成开发环境。当你掌握它的众多特性后，可以显著提高你的生产力并简化编码工作流程。

人生在世，学习总是无止境的。因此，请持续探索，持续学习吧！同时请牢记：高效编码的关键不仅在于代码本身，还在于你所使用的工具。

ITPub博客

Visual Studio Code：10个显著提升编码效率的关键功能和技巧！