大家好，我是若川。持续组织了8个月源码共读活动，感兴趣的可以点此加我微信 ruochuan12 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列
王志远，微医前端技术部医疗支撑组
前言
欢迎来到 vscode 的世界，本文目标为科普 vscode 中关于【空间控制】的一些设计理念，空间是有限的，而信息是无限的，就像是我们写页面要考虑版心、考虑空间的摆放，vscode 其实也就是一个应用，那它的界面空间也是有限的，这些中间由各个区域搭建起来，那这些区域是什么？又是如何协同工作的呢？
本文的主要内容可以说是小技巧，但我是一个很懒的人，不喜欢死记硬背，喜欢在需要记忆的内容间寻找它们内部的联系，然后用逻辑去串起来，这给我一种说不出的快感；可能这个记忆方法不适合很多行业，但在计算机领域，真是个我个人无比推崇的方法，原因很简单：计算机是一个完全由人搭建出来的世界！
这就意味着，如果能理解设计者的思路，很多东西的设计就变得顺理成章，不这么用都觉得别扭。另一个潜在的好处是，我们会渐渐像那些优秀的人一样思考，这很关键。
扯了很多，言归正传，让我们就开始吧！
系列文章目录
对于 vscode 的相关分享，大致如下，系列文章目录如下
光标操作：已完成
空间控制：本文
项目约束：待完成
插件开发：待完成
语言支持：待完成
graph TBA[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 | win |
|---|---|---|
| 在当前打开文件列表中选择 | ctrl + tab | ctrl + tab |
| 切换为当前文件中的下一个 | Open Previous Editor | cmd + option + ← | ctrl + option + ← |
| 切换为当前文件中的上一个 | Open Next Editor | cmd + option + → | ctrl + option + → |
在当前打开文件列表中选择
切换为当前文件中的上/下一个
命令执行
其实也是可以用命令去执行的
我们思考下，在 mac 中同类型的命令，为什么【在列表中选择】是ctrl键，而【切换为当前文件中的上/下一个】是cmd键；其实关键就是在 mac 中系统本身也存在快捷键cmd + 方向键，作用是全屏窗口的切换；
这样就好理解啦，系统最大，理解了这一层之后，我们可以开动脑筋了，能不能利用上一篇中说的【自定义快捷键】让他们统一呢？
当然可以，我们就加个设定：如果和系统键冲突的，我们就加个options键；以这个【切换为当前文件中的上/下一个】为例，我们依然沿用ctrl，只不过为了避免冲突，改为ctrl + options键
自定义之后逻辑可以理解为，编辑器内的文件颗粒度是 ctrl，如ctrl + ←是切换视窗，那么切换打开文件就只能是ctrl + option + ←；cmd + 0是Focus into side Bar | 聚焦于侧边栏，那切换编辑器组方向就只能是cmd + option + 0；
| 命令 | mac | win |
|---|---|---|
| 在当前打开文件列表中选择 | ctrl + tab | ctrl + tab |
| 切换为当前文件中的下一个 | Open Previous Editor | cmd + option + ← （自定义了 ctrl + option + ← ） | |
| 切换为当前文件中的上一个 | Open Next Editor | cmd + option + →（自定义了 ctrl + option + → ） |
编辑区之多文件如何同时看到相应内容：编辑器组
对于编辑器区域这么一大块内容，要想同时看到多个处理文件，那就拆分呗，这就引出了编辑器组的概念，其实就是分区而治，功能完全一样，直接看案例就好
对于编辑器组空间的把握，同样一句话，**编辑器组颗粒度是cmd**，对应命令总览如下；
命令总览
| 命令 | mac | win |
|---|---|---|
| Split Editor | 拆分编辑器 | Cmd + \ | Ctrl + \ |
| Split switch | 切换编辑器组中的当前编辑器 | Cmd + [组数] | Ctrl + [组数] |
| Flip Editor Group Layout | 切换垂直/水平编辑器布局 | Cmd + Option + 0 | Shift + Alt + 0 |
切换
| 命令 | mac | win |
|---|---|---|
| Split switch | 切换编辑器组中的当前编辑器 | Cmd + [组数] | Ctrl + [组数] |
切换编辑器组方向
默认编辑器组间的编辑器排布是横向
| 命令 | mac | win |
|---|---|---|
| Flip Editor Group Layout | 切换垂直/水平编辑器布局 | Cmd + Option + 0 | Shift + Alt + 0 |
编辑器组管控文件
我们知道了编辑器组本身的支持功能，那颗粒度更细一点，编辑器组对文件的支持呢？编辑器组内的文件颗粒度是cmd + ctrl
| 命令 | mac | win |
|---|---|---|
| Move Editor into Previous Group | 将当前文件移动到上一个编辑器 | cmd + ctrl + ← | ctrl + tab |
| Move Editor into Next Group | 将当前文件移动到下一个编辑器 | cmd + ctrl + ← |
切换当前处理文件
| 命令 | mac | win |
|---|---|---|
| 在当前打开文件列表中选择 | ctrl + tab | ctrl + tab |
| 切换为当前文件中的下一个 | Open Previous Editor | cmd + option + ← （自定义了 ctrl + option + ← ） | |
| 切换为当前文件中的上一个 | Open Next Editor | cmd + option + →（自定义了 ctrl + option + → ） |
移动当前文件至编辑器中的左右编辑组项
| 命令 | mac | win |
|---|---|---|
| Move Editor into Previous Group | 将当前文件移动到上一个编辑器 | cmd + ctrl + ← | ctrl + tab |
| Move Editor into Next Group | 将当前文件移动到下一个编辑器 | cmd + ctrl + ← |
命令面板区域
命令面板其实就是一个输入框，采用的是一种策略模式，行为根据前置标识符作为分类。
vscode 设定了符号的概念，意为变量、函数、调用等的集合。
其实可以大致分为两类，特殊标识和特殊字符，这样区分会容易记忆。
命令划分：特殊标识
| 特殊标识 | 对应策略 | 快捷键 for Mac | 快捷键 for win |
|---|---|---|---|
| 空 | 根据文件名进行模糊查询 | cmd + p | |
| ? | 获取有关可进行的操作的帮助 | ||
| > | 执行命令 | cmd + shift + p | |
| [filename?]:[rowIndex] | 定位行号（不指定文件名那就是当前打开的文件） | ctrl + g | ctrl + g |
| @[:?] | 模糊查询当前文件符号，不填默认展示所有（如果加上:会分类展示） | Cmd + Shift + O | Ctrl + Shift + O |
| # | 模糊查询当前打开的文件列表中的符号 ，不填默认为空 | cmd + T |
命令划分：特殊字符
特殊字符需要加个空格才会触发对应策略，有这样的设定也很简单，如果不加空格，直接就匹配上之前的【文件名】查找策略了
| 特殊字符 | 源单词 | 对应策略 |
|---|---|
| edt [active?] | edit | 显示所有已经打开的文件，加active则只会显示当前活动组中的文件 |
| ext [install?] | extension | 获取有关可进行的操作的帮助，加install则可以在命令面板中搜索和安装插件 |
| task | 执行任务 |
| debug | 执行调试 |
| term | terminal | 创建和管理终端实例 |
| view | 打开 VS Code 的各个 UI 组件 |
扩展提要
基于命令面板，其实还有一套关于在 vscode 中对搜索功能的梳理，限于篇幅，将会在下一篇文章中以短文（工具文）的形式出现
终端区域
比较好理解，其实就是一些命令
| 命令 | mac | win |
|---|---|---|
| 唤起终端 | toggle terminal | ctrl + 飘 | ctrl + 飘 |
| 已唤起状态下新建终端 | create new intergrate terminal | ctrl + shift + 飘 | ctrl + shift + 飘 |
| 聚焦于终端 | Focus into panel | 自定义为 cmd + 3 | |
| 聚焦于下一终端 | Focus Next Terminal | 自定义为 cmd + shift + → | |
| 聚焦于上一终端 | Focus Previous Terminal | 自定义为 cmd + shift + ← |
唤起终端
已唤起状态下新建终端
聚焦于终端
聚焦于上/下一终端
侧边栏区域
侧边栏只关心一个很常用的关键快捷键即可，即展示/隐藏侧边栏
| 命令 | mac | win |
|---|---|---|
| 展示/隐藏侧边栏 | Cmd + B | Ctrl + B |
总结
至此，我们就完成了以空间控制为主线的 vscode 之旅啦！勤于思考，享受思考，加油加油
················· 若川简介 ·················
你好，我是若川，毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇，在知乎、掘金收获超百万阅读。
从2014年起，每年都会写一篇年度总结，已经坚持写了8年，点击查看年度总结。
同时，最近组织了源码共读活动，帮助3000+前端人学会看源码。公众号愿景：帮助5年内前端人走向前列。
扫码加我微信 ruochuan02、拉你进源码共读群
今日话题
目前建有江西|湖南|湖北 籍 前端群，想进群的可以加我微信 ruochuan12 进群。分享、收藏、点赞、在看我的文章就是对我最大的支持~
