学习这些键盘快捷键，成为 VS Code 忍者

作者：Maciej Cieślar ✏️

最近，我想在 Visual Studio Code 中编程时限制鼠标的使用，因为我发现通过光标与 IDE 交互会分散注意力并严重破坏流程 - 因此，我尝试仅使用键盘导航 VSC。

在这里，我想介绍一些我发现的能够最大程度提高工作效率的快捷方式。来吧，打开 Visual Studio Code，让我们开始吧。

分裂与聚焦

除非您在非常小的屏幕上工作，否则您可能会将 IDE 分成两个或三个视图，以便在文件之间更顺畅地切换。

分裂

要拆分编辑器，您可以使用ctrl + \（⌘ + \）。

编辑器的拆分次数没有限制，但我怀疑您不会想打开超过三个视图；超过三个就不切实际了。您可以使用ctrl + 1( ⌘ + 1)、ctrl + 2( ) 等在视图之间切换。或者，您可以使用/ ( / )⌘ + 2在选项卡之间切换（进而在视图之间切换）。ctrl + page uppage down⌘ + page uppage down

聚焦

拆分编辑器后，我们最终在多个视图中打开了同一个文件。现在，我们想将焦点集中在资源管理器面板上。我们希望在不触碰鼠标的情况下进行更改。此外，如果能在不触碰鼠标的情况下聚焦不同的视图，那就太好了。

ctrl + 0我们使用( )来聚焦资源管理器面板⌘ + 0。我们使用向上和向下箭头在面板中导航。使用enter键，我们可以打开选定的文件夹或文件。

默认情况下，有两个视图：资源管理器面板和代码视图。可以使用ctrl + 1( ⌘ + 1) 来聚焦代码视图。如果我们通过拆分编辑器创建更多视图，则可以使用ctrl + 2( ⌘ + 2)、ctrl + 3( ⌘ + 3) 等来分别控制各个视图。我们还可以使用ctrl + page up/在连续的选项卡之间切换page down（默认情况下，此命令在 macOS 上未定义）。

请注意，仅当 VSC 有权访问整个文件夹时，并且仅当您使用打开的文件夹（而不是单个文件）时，此功能才会起作用。

替代方法

选择列表中距离当前打开文件较远的文件的方法也略有不同。我们可以使用ctrl + p( ⌘ + p)，它会打开一个搜索栏，我们可以在其中输入文件名 ( http.service.ts) 或完整路径 ( src/services/http.service.ts)。

使用文件历史记录

我们通常不会一次性处理项目中的所有文件；我们最多会同时处理两个，甚至三个文件。为了缩短在文件之间切换的时间（如果屏幕空间不足以分割编辑器），我们可以使用文件历史记录。

文件历史记录，顾名思义，保存了我们上次使用的文件，并提供了一种快速恢复它们的方法。在 VSC 中，我们用它ctrl + tab来在最近打开的文件之间切换。

虽然这确实非常高效，但还有另一种方法，有人可能会说它更快。通过使用alt + left/right箭头 ( ctrl + shift + -/ ( ctrl + -)，我们可以直接切换到文件历史记录中的上一个/下一个文件。

遍历代码

现在我们知道了如何浏览文件，让我们集中讨论移动代码的方式。

利用大纲

在资源管理器面板中，您可以点击“大纲”部分来显示代码的大纲。这个功能本身很棒，因为它让我们能够更全面地了解代码，同时我们也可以使用它来快速移动代码。

使用ctrl + shift + o( ⌘ + shift + o) 可以调出命令面板，在那里我们可以选择想要跳转到的大纲部分。选择带有上下箭头的定义后，相应的代码片段会高亮显示，这样我们就可以更轻松地跳转到目标位置。

相同的功能也可用于在整个项目中搜索给定的代码片段。通过使用ctrl + t( ⌘ + t)，我们再次调出命令面板，现在可以在其中输入要搜索的变量/函数/等的名称。

直达指定线路

假设我们想直接跳转到特定的行——例如，当出现指向该行的错误时。要跳转到指定索引的行，我们可以使用ctrl + g。

跳回

我们经常想快速修复代码中的某个地方，然后立即跳回到之前的位置。我们使用ctrl + u( ⌘ + u) 来实现，它会让光标回到跳转之前的位置。

文件的开始和结束

要跳转到文件的开头或结尾，我们可以分别使用ctrl + home( ⌘ + up)和ctrl + end( ⌘ + down)。

定义和参考文献

你有没有手动或用ctrl + shift + f( ⌘ + shift + f) 搜索过某个词的定义？如果你有过，你就知道这有多烦人。VSC 有一个很棒的快捷方式可以帮你解决这个问题！

跳到定义

我们可以使用 跳转到当前突出显示的函数或变量的定义F12。

预览实现

我们通常只想快速查看某个函数的实现。理想情况下，我们不想为了查看几行代码而打开另一个文件。使用alt + F12( option + F12)，我们可以在光标旁边快速查看高亮显示的函数的实现。完成后，只需按esc。

参考文献

还有一个快捷方式可以用类似的方式查看符号的引用——就在光标旁边。我们使用shift + F12(⌘ + k和F12) 来实现。

在这两种情况下，我们都可以使用向上和向下箭头来选择我们想要查看或跳转到的定义。

更改符号名称

在整个项目中更改给定符号的名称（例如，函数名称）可能非常繁琐。通常使用ctrl + shift + f( ⌘ + shift + f)来完成——我们手动替换符号的每次使用。

使用快捷键可以更快地完成此操作F2。它会弹出一个窗口，让我们在其中输入当前高亮符号的新名称，就这样——所有出现的符号现在都被替换成了新名称。

仔细查看错误

当我们的代码出现问题时，VSC 会用红线标出错误的位置。通常，我们只需将鼠标悬停在代码上即可查看错误所在。但是，使用 可以更快地完成此操作F8。

我们可以通过点击该键来退出“错误模式” esc。

智能感知

徘徊

与错误情况一样，当我们将鼠标悬停在符号上时，VSC 会显示其简化定义。为了使用键盘实现相同的效果，我们必须设置自己的快捷键。

我们可以使用ctrl + k( ⌘ + k) 然后ctrl + s( ⌘ + s) 设置自己的快捷方式，这将打开快捷方式设置视图。

然后搜索显示悬停操作：

并将其设置为您喜欢的快捷方式。我选择了alt + shift + s。

快捷方式的实际作用：

显示建议的操作

有时，VSC 能够修复我们的问题，例如，导入我们忘记导入的代码或删除未使用的代码。要查看当前高亮代码的可用操作，我们可以使用ctrl + .( ⌘ + .)。

选择代码

代码是由块组成的，可以是函数体，也可以是if块本身。有时我们想选中整个代码，然后将其移除，而不必担心块的起始和结束位置。

使用alt + shift + left/ right( ⌘ + ctrl + shift + left/ right) 快捷键可以轻松根据范围选择代码片段。重复使用此快捷键可以适当地放大或缩小选择范围。

综合终端

在全屏模式下打开 Visual Studio Code 时，终端就在我们身边，这通常很方便。在终端和代码之间切换需要一些快捷键。

打开终端

要打开终端，我们使用ctrl +“。

为了打开更多终端，我们使用ctrl + shift + `。

拆分

终端就像编辑器一样，可以拆分成多个面板。为此，我们使用ctrl + shift + 5。

聚焦

为了聚焦于终端，在编辑器中，我们在聚焦终端时使用ctrl +. If we use ctrl + ，我们可以将其状态从显示切换到隐藏。

聚焦分割面板

一旦我们聚焦于终端，我们就可以使用alt + left/ right( ⌘ + option + left/ right) 在分割面板之间切换焦点。

奖金

以下是我发现非常有用的一些终端快捷方式。

终止终端

可以通过单击终端右上角的垃圾桶图标来终止终端，但为了实现无鼠标体验，我们必须设置快捷方式。

在快捷方式设置输入框中，输入“workbench.action.terminal.kill”，然后点击它即可设置快捷方式。我选择的是ctrl + shift + x，但无论哪种方式都行。

最大化终端

有时，当有大量日志进来时，我们想暂时将终端调大一些。方法和以前一样，但在设置中输入workbench.action.toggleMaximizedPanel。这里，我选择将其放在 下ctrl + shift + q。

其他一切

如果你不知道某个命令的快捷键是什么，你可以随时使用ctrl + shift + p( ⌘ + shift + p) 打开命令面板，然后输入你想要的快捷键功能，例如“打开终端”。大多数情况下，它会在名称旁边显示正确的快捷键操作。

概括

掌握这些快捷键的关键在于坚持。尝试逐步练习，不知不觉中，你就会发现自己对鼠标的依赖越来越少，你的编程体验也会更加流畅、高效。

想了解更多？这里是 Visual Studio Code 的文档。

有没有我忘了的实用快捷键？快来分享吧！

编者注：觉得这篇文章有什么问题？您可以在这里找到正确版本。

插件：LogRocket，一个用于 Web 应用的 DVR

 

 
LogRocket是一款前端日志工具，可让您重播问题，就像它们发生在您自己的浏览器中一样。无需猜测错误发生的原因，也无需要求用户提供屏幕截图和日志转储，LogRocket 让您重播会话，快速了解问题所在。它可与任何应用程序完美兼容，不受框架限制，并且提供插件来记录来自 Redux、Vuex 和 @ngrx/store 的额外上下文。
 
除了记录 Redux 操作和状态外，LogRocket 还记录控制台日志、JavaScript 错误、堆栈跟踪、带有标头 + 正文的网络请求/响应、浏览器元数据以及自定义日志。它还会对 DOM 进行插桩，以记录页面上的 HTML 和 CSS，即使是最复杂的单页应用程序，也能重现像素完美的视频。
 
免费试用。

学习这些键盘快捷键成为 VS Code 忍者一文首先出现在LogRocket 博客上。