21讲 你不知道的工作区快捷键

在整个工作区这个部分，我们已经一一讲解了 VS Code 工作区内的各个组件，同时也介绍了每个组件里常用的快捷键。但是我们介绍的快捷键还只是工作区使用的一小部分，那今天让我们一起来看下，在工作区中还有哪些有用的快捷键，能够提升我们日常编辑器操作的效率。

编辑器操作

首先我要介绍的就是编辑器的快捷操作。我们在专栏的第一部分主要介绍了编辑器内的命令，但在工作区部分我们并没有对编辑器的操作作过太多介绍。原因主要是：我觉得 VS Code 的编辑器的组织方式，还是相对比较常见的，没有什么特别难的地方，相信你可以轻松使用。不过，要提到编辑器相关的操作，这个就比较复杂了。那它复杂在哪里呢？

横向编辑器组

编辑器的管理方式，可以说是 VS Code 一直在变化的部分。最开始的时候，VS Code 并不支持 Tab，同时你最多只能在工作区横向创建三个编辑器，比如下图：

三编辑器

拆分编辑器Cmd + _（_Windows 上是 Ctrl + ）

并且在每个单独的编辑器里，你也只能看到当前打开的这个文档，而没有 Tab，所以你看不到在这个编辑器里打开过但是暂时隐藏起来的文件。
至于如何创建出多个编辑器（最多三个），你只需要按下快捷键“Cmd + _”（_Windows 上是 Ctrl + ），或者从命令面板里搜寻 “拆分编辑器” （Split Editor）并运行即可实现。

拆分编辑器
虽然没有 Tab 的功能，但其实每个编辑器依然记录了在这个编辑器中曾经被打开的文件。所以 VS Code 把每个编辑器，称作编辑器组（Editor Group）。同时，VS Code 还提供了能在这几个编辑器组里进行快速跳转的快捷键，你可以按下 “Cmd + 1”“Cmd + 2”和“Cmd + 3”（Windows 上是 Ctrl+1，Ctrl+2，Ctrl+3）分别在这三个编辑器组里跳转。

编辑器快速跳转

纵向编辑器组

切换垂直/水平编辑器布局“Cmd + Option + 0”（Windows 上是 Shift + Alt + 0）

这之后 VS Code 就收到了非常多的反馈，很多用户希望能够把编辑器组进行纵向的布局。所以你可以使用命令 “切换垂直/水平编辑器布局” （Flip Editor Group Layout）或者按下“Cmd + Option + 0”（Windows 上是 Shift + Alt + 0）来进行布局方向的切换了。

切换编辑器布局
另外，在纵向布局的情况下，上面提到的跳转编辑器组的快捷键也依然会生效。

Tab

下一个呼声非常高的编辑器相关的需求，我想就是 Tab 的支持了。VS Code 虽然一直以来技术上是支持 Tab 的，但是并不会显示出来，而是要求你按下“Cmd + P”（Windows 上是 Ctrl + P）打开命令面板来进行文件的切换。但是 Tab 的呼声真的非常高，于是很快 VS Code 就把这个功能加上了。

编辑器中的 Tab 支持
所以，我想对于 Tab ，就并不需要过多的介绍了。不过，还是不得不提以下几个跟 Tab 相关的快捷键。

打开上/下一个编辑器（Open Previous/Next Editor）

比如，在 Tab 之间进行跳转。你可以使用命令 “打开上/下一个编辑器”（Open Previous/Next Editor）或者按下 “Cmd + Option + 左/右方向键”（Windows 上是 Ctrl + Pagedown/Pageup）在编辑器 Tab 之间进行跳转。

上一个编辑器、下一个编辑器命令
要注意的是，这个命令会依次打开每个编辑器组里的每个 Tab。但是如果你只希望在某个编辑器组里进行跳转的话，那么你就需要另一个命令 “打开组中的下一个编辑器”（Open Next Editor in Group）。
编辑器组内跳转

移动编辑器 Tab

除了将鼠标聚焦到其他编辑器组里，VS Code 还允许我们把当前的编辑器 Tab 移动到其他编辑器组当中去。比如我们可以使用命令 “将编辑器移动到下一组”（Move Editor into Next Group），将当前的 Tab 移动到下一个编辑器组中。
将编辑器移动到下一个编辑器组中
类似的命令还有，“将编辑器移动到上一组”（Move Editor into Previous Group）等。

Grid 网格布局

到这里你应该已经发现了，VS Code 对编辑器的布局，已经逐渐变得越来越宽松了。特别是最近的几个版本里已经支持了网格布局，也就是说，编辑器组不再拘泥于横向或者纵向布局了。这里，你可以先试着运行命令 “2 x 2 网格编辑器布局”[Grid Editor Layout（2 x 2）]。

编辑器网格布局
一旦变成了网格布局，毋庸置疑，VS Code 肯定会添加命令让我们能跳转到当前编辑器上方、下方、左侧和右侧的“编辑器”。比如在下图中，我就使用了 “聚焦到上方编辑器组”（Focus Above Editor Group），然后鼠标就移动到了最上面的那个编辑器，其他的几个命令也是类似的。

聚焦到上方的编辑器
有了网格系统，VS Code 编辑器组的布局就相对比较灵活了。你可以在编辑器的分界处按下鼠标左键进行上下或左右拖拽，就可以改变编辑器的大小了。

编辑器网格布局大小调整
当然如果你的网格不止是 2 x 2 的话，那使用鼠标进行操作还是非常灵活的。

编辑器网格布局

编辑器网格布局大小调整

拖拽 Drag & Drop

到这里，你应该对 VS Code 里编辑器布局的变化历史已经很熟悉了。随着布局的逐渐灵活，可以使用的命令也越来越多了，从最基础的聚焦下一个编辑器组和移动编辑器，到更灵活地在网格布局里聚焦编辑器，要想都记住它们并且绑定合适的快捷键，真的是太难了。对此我有两个建议。
第一，虽然网格系统很强大，但是不意味着它一定就是高效的或者说适合自己的。就我自己而言，我通常只会使用左、右两个编辑器组，并且只需要熟悉几个快捷键就行了。
第二，就是使用鼠标。VS Code 有很不错的拖拽功能。比如你可以在编辑器组中对 Tab 进行拖拽，把它放到你想要的位置。

编辑器拖拽
从上面的动图中你可以看到，在我们移动鼠标时，VS Code 会把释放鼠标后编辑器将会放置的位置显示了出来，十分直观。
除了拖拽编辑器 Tab 以外，我们还可以从资源管理器里对文件进行拖拽；

从资源管理器中将文件拖拽入编辑器
同样的，从系统资源管理器里我们也能够把文件直接拖入 VS Code 中打开。
从系统资源管理器将文件拖拽入编辑器
有了鼠标的拖拽功能，我们就能够从容应对 VS Code 相对灵活的布局系统了。

专注模式

我们在工作的时候，有时候希望更专注于代码编辑器，而不希望被 VS Code 的其他组件，比如视图或者面板所打扰。或者我们在比较小的屏幕上工作，比如说笔记本，有时候也有类似的需求，视图和面板等都太占屏幕面积了。对于这样的需求，VS Code 有几个非常实用的快捷键。
首先，我们可以按下 Cmd + B （Windows 上是 Ctrl + B）打开或者关闭整个视图；

隐藏侧边栏
也可以按下 Cmd + J （Windows 上是 Ctrl + J）来打开或者关闭面板。

隐藏面板
如果我们不希望看到最左侧的活动栏，或者最下面的状态栏，也可以通过命令 “切换活动栏可见性”（Toggle Activity Bar Visibility）和 “切换状态栏可见性”（Toggle Status Bar Visibility）来一键开关。

隐藏活动栏和状态栏
除了可以使用上面介绍的这几种快捷键去分别打开、隐藏不同的组件以外，VS Code 还提供了一个禅模式，通过运行 “切换禅模式”(Toggle Zen Mode)，就可以把侧边栏、面板等全部隐藏。进入禅模式后，只需按下 Escape 键，即可退出禅模式。

禅模式
看到这里你可能会问，“这几个操作，都是为小屏幕做了很好的优化，但如果说我的屏幕特别大，VS Code 有什么好的优化没有？”
有！你可以执行 “切换居中布局”（Toggle Centered Layout），将编辑器放在 VS Code 工作区的正中间，同时你还可以通过拉动编辑器两边的边框，调整编辑器的宽度。如此一来，当你使用大屏幕时，就不用担心编辑器里的代码，都“缩”在屏幕的左上角了。

编辑器居中模式
有了上面这几个快捷键，当你在需要专注于某个代码的时候，就可以只显示编辑器了，比如下图：

单编辑器且居中
而当你需要使用其他组件时，比如集成终端，你只需按下 Ctrl + `(baiketike) ，就可以将其调出了。
唤出集成终端
不管怎样，我个人还是更喜欢把编辑器配置得简洁一些，然后每次只专注于一个任务。当然喜欢或习惯并行操作的同学，可能就会更喜欢使用网格系统。这个因人或因任务而异吧。

缩放

缩放功能也是我在日常工作中经常使用的。比如我自己配置的字体比较小，而当需要给其他同事展示代码的时候，就往往需要把字体调大以便于更好地展示，这时候我就会按下“Cmd +/-”（Windows 上是 Ctrl +/-）来缩放整个工作区。

编辑器缩放
而如果我希望一键将缩放调整为默认设置，就可以执行命令 “重置缩放”（reset zoom）。

重置编辑器缩放

小结

这就是关于工作区的常用的快捷键了（也可参考下面的汇总表），通过它们我们能够更好地管理我们的工作台界面，以满足我们不同工作场景下的需求，从而也让 “工作台” 这个名字，更名副其实。

工作区常用快捷键汇总
而在今天的文章中，我并没有介绍跟某个特定视图、面板相关的命令，相信你已经知道了如何去找到它们，前面文章我们讲解过的。不过这里我再多啰嗦一句，如果你想搜索某个组件相关的命令，你可以打开命令面板，搜索名字，然后就能够看到跟这个组件相关的命令了。

搜索组件相关命令
总之，VS Code 的界面定制、快捷键、各个组件的功能，给我们提供的选项非常多，但这不意味着我们必须要掌握全部的内容。重要的还是找到适合自己的那几个配置和快捷键，优化自己日常工作的流程，那就足够了。也欢迎你在评论区留言，分享你的学习或使用心得。