# 21讲你不知道的工作区快捷键 <br> :-:  <br> 在整个工作区这个部分，我们已经一一讲解了 VS Code 工作区内的各个组件，同时也介绍了每个组件里常用的快捷键。但是我们介绍的快捷键还只是工作区使用的一小部分，那今天让我们一起来看下，在工作区中还有哪些有用的快捷键，能够提升我们日常编辑器操作的效率。 <br> ## 编辑器操作 <br> 首先我要介绍的就是**编辑器的快捷操作**。我们在专栏的第一部分主要介绍了**编辑器内的命令**，但在工作区部分我们并没有对编辑器的操作作过太多介绍。原因主要是：我觉得 VS Code 的编辑器的组织方式，还是相对比较常见的，没有什么特别难的地方，相信你可以轻松使用。不过，要提到编辑器相关的操作，这个就比较复杂了。那它复杂在哪里呢？ <br> ### 横向编辑器组 <br> 编辑器的管理方式，可以说是 VS Code 一直在变化的部分。最开始的时候，VS Code 并不支持 Tab，同时你最多只能在工作区横向创建三个编辑器，比如下图： <br> :-:  <br> :-: 三编辑器 <br> 并且在每个单独的编辑器里，你也只能看到当前打开的这个文档，而没有 Tab，所以你看不到在这个编辑器里打开过但是暂时隐藏起来的文件。 <br> 至于如何创建出多个编辑器（最多三个），你只需要按下快捷键“Cmd + \\”（Windows 上是 Ctrl + \\），或者从命令面板里搜寻 “拆分编辑器” （Split Editor）并运行即可实现。 <br> :-:  <br> :-: 拆分编辑器 <br> 虽然没有 Tab 的功能，但其实每个编辑器依然记录了在这个编辑器中曾经被打开的文件。所以 VS Code 把每个编辑器，称作**编辑器组（Editor Group）**。同时，VS Code 还提供了能在这几个编辑器组里进行快速跳转的快捷键，你可以按下 “Cmd + 1”“Cmd + 2”和“Cmd + 3”（Windows 上是 Ctrl+1，Ctrl+2，Ctrl+3）分别在这三个编辑器组里跳转。 <br> :-:  <br> :-: 编辑器快速跳转 <br> ### 纵向编辑器组 <br> 这之后 VS Code 就收到了非常多的反馈，很多用户希望能够把编辑器组进行纵向的布局。所以你可以使用命令 “切换垂直/水平编辑器布局” （Flip Editor Group Layout）或者按下“Cmd + Option + 0”（Windows 上是 Shift + Alt + 0）来进行布局方向的切换了。 <br> :-:  <br> :-: 切换编辑器布局 <br> 另外，在纵向布局的情况下，上面提到的跳转编辑器组的快捷键也依然会生效。 <br> ### Tab <br> 下一个呼声非常高的编辑器相关的需求，我想就是 Tab 的支持了。VS Code 虽然一直以来技术上是支持 Tab 的，但是并不会显示出来，而是要求你按下“Cmd + P”（Windows 上是 Ctrl + P）打开命令面板来进行文件的切换。但是 Tab 的呼声真的非常高，于是很快 VS Code 就把这个功能加上了。 <br> :-:  <br> :-: 编辑器中的 Tab 支持 <br> 所以，我想对于 Tab ，就并不需要过多的介绍了。不过，还是不得不提以下几个跟 Tab 相关的快捷键。 <br> 比如，在 Tab 之间进行跳转。你可以使用命令 “打开上/下一个编辑器”（Open Previous/Next Editor）或者按下 “Cmd + Option + 左/右方向键”（Windows 上是 Ctrl + Pagedown/Pageup）在编辑器 Tab 之间进行跳转。 <br> :-:  <br> :-: 上一个编辑器、下一个编辑器命令 <br> 要注意的是，这个命令会依次打开每个编辑器组里的每个 Tab。但是如果你只希望在某个编辑器组里进行跳转的话，那么你就需要另一个命令 “打开组中的下一个编辑器”（Open Next Editor in Group）。 <br> :-:  <br> :-: 编辑器组内跳转 <br> ### 移动编辑器 Tab <br> 除了将鼠标聚焦到其他编辑器组里，VS Code 还允许我们把当前的编辑器 Tab 移动到其他编辑器组当中去。比如我们可以使用命令 “将编辑器移动到下一组”（Move Editor into Next Group），将当前的 Tab 移动到下一个编辑器组中。 <br> :-:  <br> :-: 将编辑器移动到下一个编辑器组中 <br> 类似的命令还有，“将编辑器移动到上一组”（Move Editor into Previous Group）等。 <br> ## Grid 网格布局 <br> 到这里你应该已经发现了，VS Code 对编辑器的布局，已经逐渐变得越来越宽松了。特别是最近的几个版本里已经支持了网格布局，也就是说，编辑器组不再拘泥于横向或者纵向布局了。这里，你可以先试着运行命令 “2 x 2 网格编辑器布局”\[Grid Editor Layout（2 x 2）\]。 <br> :-:  <br> :-: 编辑器网格布局 <br> 一旦变成了网格布局，毋庸置疑，VS Code 肯定会添加命令让我们能跳转到当前编辑器上方、下方、左侧和右侧的“编辑器”。比如在下图中，我就使用了 “聚焦到上方编辑器组”（Focus Above Editor Group），然后鼠标就移动到了最上面的那个编辑器，其他的几个命令也是类似的。 <br> :-:  <br> :-: 聚焦到上方的编辑器 <br> 有了网格系统，VS Code 编辑器组的布局就相对比较灵活了。你可以在编辑器的分界处按下鼠标左键进行上下或左右拖拽，就可以改变编辑器的大小了。 <br> :-:  <br> :-: 编辑器网格布局大小调整 <br> 当然如果你的网格不止是 2 x 2 的话，那使用鼠标进行操作还是非常灵活的。 <br> :-:  <br> :-: 编辑器网格布局 <br> :-:  <br> :-: 编辑器网格布局大小调整 <br> ## 拖拽 Drag & Drop <br> 到这里，你应该对 VS Code 里编辑器布局的变化历史已经很熟悉了。随着布局的逐渐灵活，可以使用的命令也越来越多了，从最基础的聚焦下一个编辑器组和移动编辑器，到更灵活地在网格布局里聚焦编辑器，要想都记住它们并且绑定合适的快捷键，真的是太难了。对此我有两个建议。 <br> 第一，虽然网格系统很强大，但是不意味着它一定就是高效的或者说适合自己的。就我自己而言，我通常只会使用左、右两个编辑器组，并且只需要熟悉几个快捷键就行了。 <br> 第二，就是使用鼠标。VS Code 有很不错的拖拽功能。比如你可以在编辑器组中对 Tab 进行拖拽，把它放到你想要的位置。 <br> :-:  <br> :-: 编辑器拖拽 <br> 从上面的动图中你可以看到，在我们移动鼠标时，VS Code 会把释放鼠标后编辑器将会放置的位置显示了出来，十分直观。 <br> 除了拖拽编辑器 Tab 以外，我们还可以从资源管理器里对文件进行拖拽； <br> :-:  <br> :-: 从资源管理器中将文件拖拽入编辑器 <br> 同样的，从系统资源管理器里我们也能够把文件直接拖入 VS Code 中打开。 <br> :-:  <br> :-: 从系统资源管理器将文件拖拽入编辑器 <br> 有了鼠标的拖拽功能，我们就能够从容应对 VS Code 相对灵活的布局系统了。 <br> ## 专注模式 <br> 我们在工作的时候，有时候希望更专注于代码编辑器，而不希望被 VS Code 的其他组件，比如视图或者面板所打扰。或者我们在比较小的屏幕上工作，比如说笔记本，有时候也有类似的需求，视图和面板等都太占屏幕面积了。对于这样的需求，VS Code 有几个非常实用的快捷键。 <br> 首先，我们可以按下 Cmd + B （Windows 上是 Ctrl + B）打开或者关闭整个视图； <br> :-:  <br> :-: 隐藏侧边栏 <br> 也可以按下 Cmd + J （Windows 上是 Ctrl + J）来打开或者关闭面板。 <br> :-:  <br> :-: 隐藏面板 <br> 如果我们不希望看到最左侧的活动栏，或者最下面的状态栏，也可以通过命令 “切换活动栏可见性”（Toggle Activity Bar Visibility）和 “切换状态栏可见性”（Toggle Status Bar Visibility）来一键开关。 <br> :-:  <br> :-: 隐藏活动栏和状态栏 <br> 除了可以使用上面介绍的这几种快捷键去分别打开、隐藏不同的组件以外，VS Code 还提供了一个禅模式，通过运行 “切换禅模式”(Toggle Zen Mode)，就可以把侧边栏、面板等全部隐藏。进入禅模式后，只需按下 Escape 键，即可退出禅模式。 <br> :-:  <br> :-: 禅模式 <br> 看到这里你可能会问，“这几个操作，都是为小屏幕做了很好的优化，但如果说我的屏幕特别大，VS Code 有什么好的优化没有？” <br> 有！你可以执行 “切换居中布局”（Toggle Centered Layout），将编辑器放在 VS Code 工作区的正中间，同时你还可以通过拉动编辑器两边的边框，调整编辑器的宽度。如此一来，当你使用大屏幕时，就不用担心编辑器里的代码，都“缩”在屏幕的左上角了。 <br> :-:  <br> :-: 编辑器居中模式 <br> 有了上面这几个快捷键，当你在需要专注于某个代码的时候，就可以只显示编辑器了，比如下图： <br> :-:  <br> :-: 单编辑器且居中 <br> 而当你需要使用其他组件时，比如集成终端，你只需按下 Ctrl + ` ，就可以将其调出了。 <br> :-:  <br> :-: 唤出集成终端 <br> 不管怎样，我个人还是更喜欢把编辑器配置得简洁一些，然后每次只专注于一个任务。当然喜欢或习惯并行操作的同学，可能就会更喜欢使用网格系统。这个因人或因任务而异吧。 <br> ## 缩放 <br> 缩放功能也是我在日常工作中经常使用的。比如我自己配置的字体比较小，而当需要给其他同事展示代码的时候，就往往需要把字体调大以便于更好地展示，这时候我就会按下“Cmd +/-”（Windows 上是 Ctrl +/-）来缩放整个工作区。 <br> :-:  <br> :-: 编辑器缩放 <br> 而如果我希望一键将缩放调整为默认设置，就可以执行命令 “重置缩放”（reset zoom）。 <br> :-:  <br> :-: 重置编辑器缩放 <br> ## 小结 <br> 这就是关于工作区的常用的快捷键了（也可参考下面的汇总表），通过它们我们能够更好地管理我们的工作台界面，以满足我们不同工作场景下的需求，从而也让 “工作台” 这个名字，更名副其实。 <br> :-:  <br> :-: 工作区常用快捷键汇总 <br> 而在今天的文章中，我并没有介绍跟某个特定视图、面板相关的命令，相信你已经知道了如何去找到它们，前面文章我们讲解过的。不过这里我再多啰嗦一句，如果你想搜索某个组件相关的命令，你可以打开命令面板，搜索名字，然后就能够看到跟这个组件相关的命令了。 <br> :-:  <br> :-: 搜索组件相关命令 <br> 总之，VS Code 的界面定制、快捷键、各个组件的功能，给我们提供的选项非常多，但这不意味着我们必须要掌握全部的内容。重要的还是找到适合自己的那几个配置和快捷键，优化自己日常工作的流程，那就足够了。也欢迎你在评论区留言，分享你的学习或使用心得。