你不知道的vscode之空间控制

王志远，微医前端技术部医疗支撑组

前言

欢迎来到 vscode 的世界，本文目标为科普 vscode 中关于【空间控制】的一些设计理念，空间是有限的，而信息是无限的，就像是我们写页面要考虑版心、考虑空间的摆放，vscode 其实也就是一个应用，那它的界面空间也是有限的，这些中间由各个区域搭建起来，那这些区域是什么？又是如何协同工作的呢？

本文的主要内容可以说是小技巧，但我是一个很懒的人，不喜欢死记硬背，喜欢在需要记忆的内容间寻找它们内部的联系，然后用逻辑去串起来，这给我一种说不出的快感；可能这个记忆方法不适合很多行业，但在计算机领域，真是个我个人无比推崇的方法，原因很简单：计算机是一个完全由人搭建出来的世界！

这就意味着，如果能理解设计者的思路，很多东西的设计就变得顺理成章，不这么用都觉得别扭。另一个潜在的好处是，我们会渐渐像那些优秀的人一样思考，这很关键。

扯了很多，言归正传，让我们就开始吧！

系列文章目录

对于 vscode 的相关分享，大致如下，系列文章目录如下

• 光标操作：已完成
• 空间控制：本文
• 项目约束：待完成
• 插件开发：待完成
• 语言支持：待完成

graph TB

A[Vscode] --> F[命令世界]
A[Vscode] --> D[语言支持]
A[Vscode] --> B[光标操作]
A[Vscode] --> C[空间控制]
A[Vscode] --> G[项目约束]
A[Vscode] --> E[插件开发]
B --> B1[光标移动]
B --> B2[多光标]
B --> B3[自定义]
C --> C1[编辑区]
C --> C2[终端区]
C --> C3[命令面板]
C --> C4[侧边栏]
G --> G1[调试 debugger]
G --> G2[任务 task]
G --> G3[代码块 snipshapt]

vscode 区域总览

以上图为例，我们常见并且常用的区域及对应功能大致如下

• 工作目录：当前处理项目的目录信息

• 命令面板：提供支持通过命令唤起 vscode 对应动作的面板

• 编辑区：更改当前项目内容的区域，存在编辑组等概念

• 终端区：提供内嵌终端区域的方式实现在 vscode 中直接执行终端命令，win 默认power shell；可配置为 bash

  知道了这些核心区域的存在，接下来，我们开始逐一分析

编辑区域

编辑器区域是最最关键的一块区域，因为它是我们直接控制项目的入口，正常的文件操作设计理念其实主要是对光标的操作，这个在光标操作一文中已经分享过，就不赘述了，有兴趣的小伙伴可以去看一下；

本文关心点在于空间的分配，编辑区是默认展示而且占用面积最大的一块区域，对于这块空间的处理，主要存在如下诉求

• 多个打开的文件间如何切换
• 多文件如何同时看到相应内容

对于第一个问题，可以通过一类快捷键实现；而对于第二个问题，在 vscode 中提出了编辑器组的概念，编辑区可以被划分成至多五块区域，相互独立。

如果阅读过光标操作一文，会知道我是采用【颗粒度】的角度进行理解光标设定的，空间控制其实也可以从这个角度进行理解，具体怎么做，我们通过问题进行理解

编辑区之多个打开的文件间如何切换：快捷键

我们先来看下默认的快捷键设定

在当前打开文件列表中选择

切换为当前文件中的上/下一个

命令执行

其实也是可以用命令去执行的

我们思考下，在 mac 中同类型的命令，为什么【在列表中选择】是ctrl键，而【切换为当前文件中的上/下一个】是cmd键；其实关键就是在 mac 中系统本身也存在快捷键cmd + 方向键，作用是全屏窗口的切换；

这样就好理解啦，系统最大，理解了这一层之后，我们可以开动脑筋了，能不能利用上一篇中说的【自定义快捷键】让他们统一呢？

当然可以，我们就加个设定：如果和系统键冲突的，我们就加个options键；以这个【切换为当前文件中的上/下一个】为例，我们依然沿用ctrl，只不过为了避免冲突，改为ctrl + options键

自定义之后逻辑可以理解为，编辑器内的文件颗粒度是 ctrl，如ctrl + ←是切换视窗，那么切换打开文件就只能是ctrl + option + ←；cmd + 0是Focus into side Bar | 聚焦于侧边栏，那切换编辑器组方向就只能是cmd + option + 0；

编辑区之多文件如何同时看到相应内容：编辑器组

对于编辑器区域这么一大块内容，要想同时看到多个处理文件，那就拆分呗，这就引出了编辑器组的概念，其实就是分区而治，功能完全一样，直接看案例就好

对于编辑器组空间的把握，同样一句话，**编辑器组颗粒度是cmd**，对应命令总览如下；

命令总览

切换

切换编辑器组方向

默认编辑器组间的编辑器排布是横向

编辑器组管控文件

我们知道了编辑器组本身的支持功能，那颗粒度更细一点，编辑器组对文件的支持呢？编辑器组内的文件颗粒度是cmd + ctrl

切换当前处理文件

移动当前文件至编辑器中的左右编辑组项

命令面板区域

命令面板其实就是一个输入框，采用的是一种策略模式，行为根据前置标识符作为分类。

vscode 设定了符号的概念，意为变量、函数、调用等的集合。

其实可以大致分为两类，特殊标识和特殊字符，这样区分会容易记忆。

命令划分：特殊标识

命令划分：特殊字符

特殊字符需要加个空格才会触发对应策略，有这样的设定也很简单，如果不加空格，直接就匹配上之前的【文件名】查找策略了

扩展提要

基于命令面板，其实还有一套关于在 vscode 中对搜索功能的梳理，限于篇幅，将会在下一篇文章中以短文（工具文）的形式出现

终端区域

比较好理解，其实就是一些命令

唤起终端

已唤起状态下新建终端

聚焦于终端

聚焦于上/下一终端

侧边栏区域

侧边栏只关心一个很常用的关键快捷键即可，即展示/隐藏侧边栏

总结

至此，我们就完成了以空间控制为主线的 vscode 之旅啦！勤于思考，享受思考，加油加油