VS Code：初学者提示和技巧

让我们探索一些可以使 VS Code 中的导航和编辑更快的键盘快捷键。许多快捷键在其他编辑器中也受支持。例如，如果您熟悉 Sublime Text，您会发现大多数快捷键都非常相似。学习这些快捷键可以帮助您在 VS Code 中更快地工作，如果您切换到或使用其他编辑器，它们也会很有用。

如果上面列出的一些快捷键对您不起作用，请检查您的键盘快捷键设置。您可以通过按 Command + K，然后按 Command + S（macOS）或使用菜单 **代码** > **设置** > **键盘快捷键**（截至版本 1.83.1）来访问设置。您可能会注意到为特定操作设置了不同的键组合，或者您可能需要设置新的快捷键。您可以自定义键盘快捷键以适合您的风格和需求。

我在撰写本文时了解了 禅模式。我发现此功能类似于 Google Docs 中的无页模式。您可以通过 Command + K，Z（macOS）激活禅模式（**查看** > **外观** > **禅模式**）。要退出，请使用相同的键组合或按 Esc 两次。如果您希望您的工作区没有杂乱或干扰，您可能会喜欢这种模式。

我最喜欢的快捷键是 Command + D，因为它允许我选择单词或短语的多个匹配项，并同时就地编辑它们。例如，要使关键字的多个匹配项变为粗体，我使用此键组合来选择它们，然后键入两个星号。VS Code 会自动在每个选定单词的两侧放置一个星号（请参阅 环绕字符 功能），使它们变为粗体。这通常比使用传统的“查找和替换”实用程序更快，尤其是在处理可见框架中较少数量的匹配项时。“查找和替换”在处理批量替换或需要执行正则表达式搜索时可以提供帮助。

您已经在使用上述多少个快捷键？您是否使用所有快捷键，或者您发现其他快捷键更有帮助？我发现，即使在 VS Code 中工作时使用几个快捷键也能提高我的效率，更不用说使用这些快捷键很有趣了！当您使用 Google Docs 时，这些快捷键不起作用是不是有点烦人？😅

VS Code 提供了一些很酷的功能，可以立即加快您的写作和编辑速度。

VS Code 中的内置“终端”允许您直接从编辑器运行 shell 命令，因此您无需在 VS Code 和单独的终端窗口之间切换。它支持多个终端，您可以轻松地在它们之间切换。要打开终端，请在 Windows 和 macOS 上按 Ctrl + `（**查看** > **终端**）。终端还支持文本选择，因此您可以轻松地复制和粘贴到终端以及从终端复制和粘贴文本。

VS Code 中的大纲视图功能显示文档的树状结构，显示文件中的标题、类、方法和其他重要元素。您可以单击所需的元素以直接导航到文件中的相应部分。树状结构会随着您添加、删除或重新排列标题而动态调整，使您可以轻松地导航到不同的部分，而无需滚动文档。除了快速导航之外，它还有助于快速概述文档的结构。

大纲视图可从侧边栏访问；它通常位于 **资源管理器** 选项卡下方。如果它尚未显示，您可以通过 **查看** > **打开视图...** 菜单启用它，键入“大纲”并按 Return。

大纲视图可用于各种文件类型，从 编程 到 标记 语言。在 Markdown 文件中，标题在大纲视图中变成了可点击的目录。

对于使用 Markdown 文件，VS Code 提供了 Markdown 预览 功能。它显示 .md 文件格式化输出的实时预览，类似于内容在网页上的显示方式。要打开预览，请在 macOS 上按 Command + K，然后按 V。这将打开一个并排视图，其中呈现您的 Markdown 文本，并在您编辑文件时更新。

我发现此预览功能在编写和编辑文档时非常方便，因为它允许我立即发现并修复任何格式问题。此外，由于预览会随着您的输入而更新，因此您看到的内容始终是最新的。它可以帮助您更专注于内容创建，而不是格式问题。

无论您是创建简短的 README 还是编写大量文档，此功能都非常方便。

• **自动环绕字符**：VS Code 中的一个很棒的功能是，当选择一个单词或短语时，键入一个字符 将选定的文本用该字符括起来。当您需要用引号或括号等字符包装单词的多个匹配项时，此功能可以节省大量时间。结合我们之前在 macOS 上看到的 Command + D 键组合，您可以立即对多个选择进行这些编辑。
• **多光标编辑**：这是我的另一个最喜欢的功能。通过按住 Option 键并在所有需要的位置单击鼠标，您可以创建 多个光标 以同时编辑多行或短语。

此外，您可以在起始点单击，按住 Option 和 Shift 键（在 macOS 上）并拖动以在一列中创建多个光标，这对于编辑彼此相邻的行非常方便。我发现此功能在需要缩进多行时非常有效；与其为每一行按 Tab 键，不如通过在选定位置单击、按住 Option 和 Shift、拖动光标，然后使用单个 Tab 键按下缩进所有行。

VS Code 的内置 Git 功能有助于管理版本控制，并且使处理一些复杂场景变得更容易。

• **解决合并冲突**：在协作项目（例如 MDN）中工作时，合并冲突 几乎不可避免。VS Code 的直观 GUI 有助于解决这些冲突。您可以轻松比较冲突的文件、识别差异并选择如何解决它们。
• **查看提交历史记录**：您可以使用源代码管理视图（macOS 上的 Control + Shift + G）查看更改列表以及当前存储库中的 提交 历史记录，如下面的图像所示。您甚至可以在提供的输入字段中直接键入提交消息，以在提交更改之前捕获您的更改。

• 管理分支：您可以从窗口底部的状态栏快速访问分支管理功能。当您点击当前分支名称时，您可以通过快速选择菜单搜索并切换到其他分支，甚至创建新的分支。源代码管理视图提供了另一种管理和访问不同分支的方式。

通过安装扩展（macOS 上按 Command + Shift + X），您可以在 VS Code 的内置功能之上添加大量额外的功能。您可以直接从 VS Code 内的 Marketplace 安装它们。不过，使用时请谨慎；它们有自己的设置，可能会覆盖项目的设置。

我发现 Markdown Linter 扩展对于维护一致的 Markdown 语法非常有帮助。启用此扩展后，如果您在键入时有任何偏离规则的地方，都会被标记出来。您还可以通过按 Command + Shift + M 或将鼠标悬停在文件中的某一行上以查看特定警告，在 IDE 的问题选项卡中查看所有警告。

如果错别字出现在生产环境中，可能会令人沮丧且尴尬。像 Code Spell Checker 这样的拼写检查扩展是必不可少的，可以在您提交更改之前捕获这些错误。字典中不存在的单词会被下划线标出，并且也会出现在 IDE 的问题选项卡中。您还可以使用灯泡图标进行快速修复。

GitLens 增强了 VS Code 的内置 Git 功能。此扩展非常有用，可以快速查看谁更改了文件内容、何时更改以及更改原因，所有这些都直接在编辑器中完成，无需访问 GitHub 或运行 Git 命令即可查看提交历史。它提供了实时的内联代码归属注释，如下面的图像所示。

安装 GitLens 后，会在终端选项卡旁边添加一个名为GitLens的专用选项卡。您可以使用它以可视化的方式查看提交历史。

在本文中，您了解了 VS Code 如何帮助您更轻松、更快速地完成工作，无论您是在编写代码还是文档。我们查看了快捷方式、GitLens 等扩展以及其他可以加快工作速度的内置 Git 功能。

我很乐意听到您使用 VS Code 的技巧。请随时在我们 MDN Web Docs 的 Discord 服务器 上分享。

• 官方 VS Code 文档
• Windows、macOS 和 Linux 的键盘参考表
• VS Code 能做到吗？