欢迎来到 vscode 的世界，本文目标为科普 vscode 中关于【空间控制】的一些设计理念，空间是有限的，而信息是无限的，就像是我们写页面要考虑版心、考虑空间的摆放，vscode 其实也就是一个应用，那它的界面空间也是有限的，这些中间由各个区域搭建起来，那这些区域是什么？又是如何协同工作的呢？【推荐学习：《vscode教程》】
本文的主要内容可以说是小技巧，但我是一个很懒的人，不喜欢死记硬背，喜欢在需要记忆的内容间寻找它们内部的联系，然后用逻辑去串起来，这给我一种说不出的快感；可能这个记忆方法不适合很多行业，但在计算机领域，真是个我个人无比推崇的方法，原因很简单：计算机是一个完全由人搭建出来的世界！
这就意味着，如果能理解设计者的思路，很多东西的设计就变得顺理成章，不这么用都觉得别扭。另一个潜在的好处是，我们会渐渐像那些优秀的人一样思考，这很关键。
扯了很多，言归正传，让我们就开始吧！
vscode 区域总览
以上图为例，我们常见并且常用的区域及对应功能大致如下
工作目录：当前处理项目的目录信息
命令面板：提供支持通过命令唤起 vscode 对应动作的面板
编辑区：更改当前项目内容的区域，存在编辑组等概念
终端区：提供内嵌终端区域的方式实现在 vscode 中直接执行终端命令，win 默认power shell；可配置为 bash
知道了这些核心区域的存在，接下来，我们开始逐一分析
编辑区域
编辑器区域是最最关键的一块区域，因为它是我们直接控制项目的入口，正常的文件操作设计理念其实主要是对光标的操作，这个在光标操作一文中已经分享过，就不赘述了，有兴趣的小伙伴可以去看一下；
本文关心点在于空间的分配，编辑区是默认展示而且占用面积最大的一块区域，对于这块空间的处理，主要存在如下诉求
多个打开的文件间如何切换多文件如何同时看到相应内容
对于第一个问题，可以通过一类快捷键实现；而对于第二个问题，在 vscode 中提出了编辑器组的概念，编辑区可以被划分成至多五块区域，相互独立。
如果阅读过光标操作一文，会知道我是采用【颗粒度】的角度进行理解光标设定的，空间控制其实也可以从这个角度进行理解，具体怎么做，我们通过问题进行理解
编辑区之多个打开的文件间如何切换：快捷键
我们先来看下默认的快捷键设定
在当前打开文件列表中选择ctrl + tabctrl + tab切换为当前文件中的下一个 | Open Previous Editorcmd + option + ←ctrl + option + ←切换为当前文件中的上一个 | Open Next Editorcmd + 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；
在当前打开文件列表中选择ctrl + tabctrl + tab切换为当前文件中的下一个 | Open Previous Editorcmd + option + ← （自定义了 ctrl + option + ← ）
切换为当前文件中的上一个 | Open Next Editorcmd + option + →（自定义了 ctrl + option + → ）
编辑区之多文件如何同时看到相应内容：编辑器组
对于编辑器区域这么一大块内容，要想同时看到多个处理文件，那就拆分呗，这就引出了编辑器组的概念，其实就是分区而治，功能完全一样，直接看案例就好
对于编辑器组空间的把握，同样一句话，编辑器组颗粒度是cmd，对应命令总览如下；
命令总览
Split Editor | 拆分编辑器Cmd + Ctrl + Split switch | 切换编辑器组中的当前编辑器Cmd + [组数]Ctrl + [组数]Flip Editor Group Layout | 切换垂直/水平编辑器布局Cmd + Option + 0Shift + Alt + 0
切换
Split switch | 切换编辑器组中的当前编辑器Cmd + [组数]Ctrl + [组数]
切换编辑器组方向
默认编辑器组间的编辑器排布是横向
Flip Editor Group Layout | 切换垂直/水平编辑器布局Cmd + Option + 0Shift + Alt + 0
编辑器组管控文件
我们知道了编辑器组本身的支持功能，那颗粒度更细一点，编辑器组对文件的支持呢？编辑器组内的文件颗粒度是cmd + ctrl
Move Editor into Previous Group | 将当前文件移动到上一个编辑器cmd + ctrl + ←ctrl + tabMove Editor into Next Group | 将当前文件移动到下一个编辑器cmd + ctrl + ←
切换当前处理文件
在当前打开文件列表中选择ctrl + tabctrl + tab切换为当前文件中的下一个 | Open Previous Editorcmd + option + ← （自定义了 ctrl + option + ← ）
切换为当前文件中的上一个 | Open Next Editorcmd + option + →（自定义了 ctrl + option + → ）
移动当前文件至编辑器中的左右编辑组项
Move Editor into Previous Group | 将当前文件移动到上一个编辑器cmd + ctrl + ←ctrl + tabMove Editor into Next Group | 将当前文件移动到下一个编辑器cmd + ctrl + ←
命令面板区域
命令面板其实就是一个输入框，采用的是一种策略模式，行为根据前置标识符作为分类。
vscode 设定了符号的概念，意为变量、函数、调用等的集合。
其实可以大致分为两类，特殊标识和特殊字符，这样区分会容易记忆。
命令划分：特殊标识
空根据文件名进行模糊查询cmd + p
?获取有关可进行的操作的帮助
执行命令cmd + shift + p
[filename?]:[rowIndex]定位行号（不指定文件名那就是当前打开的文件）ctrl + gctrl + g@[:?]模糊查询当前文件符号，不填默认展示所有（如果加上:会分类展示）Cmd + Shift + OCtrl + Shift + O#模糊查询当前打开的文件列表中的符号 ，不填默认为空cmd + T
命令划分：特殊字符
特殊字符需要加个空格才会触发对应策略，有这样的设定也很简单，如果不加空格，直接就匹配上之前的【文件名】查找策略了
edt [active?] | edit显示所有已经打开的文件，加active则只会显示当前活动组中的文件ext [install?] | extension获取有关可进行的操作的帮助，加install则可以在命令面板中搜索和安装插件task执行任务debug执行调试term | terminal创建和管理终端实例view打开 VS Code 的各个 UI 组件
扩展提要
基于命令面板，其实还有一套关于在 vscode 中对搜索功能的梳理，限于篇幅，将会在下一篇文章中以短文（工具文）的形式出现
终端区域
比较好理解，其实就是一些命令
唤起终端 | toggle terminalctrl + 飘ctrl + 飘已唤起状态下新建终端 | create new intergrate terminalctrl + shift + 飘ctrl + shift + 飘聚焦于终端 | Focus into panel自定义为 cmd + 3
聚焦于下一终端 | Focus Next Terminal自定义为 cmd + shift + →
聚焦于上一终端 | Focus Previous Terminal自定义为 cmd + shift + ←
唤起终端
已唤起状态下新建终端
聚焦于终端
聚焦于上/下一终端
侧边栏区域
侧边栏只关心一个很常用的关键快捷键即可，即展示/隐藏侧边栏
展示/隐藏侧边栏Cmd + BCtrl + B
总结
至此，我们就完成了以空间控制为主线的 vscode 之旅啦！勤于思考，享受思考，加油加油
更多关于VSCode的相关知识，请访问：vscode基础教程！
以上就是带你了解vscode中的【空间控制】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/56233.html
微信扫一扫 
支付宝扫一扫 
