当前位置:Gxl网 > 系统工具 > 带你了解vscode中的【空间控制】

带你了解vscode中的【空间控制】

时间:2022-11-15 帮助过:7人阅读 来源: 互联网

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

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

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

扯了很多,言归正传,让我们就开始吧!

vscode 区域总览

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

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

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

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

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

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

编辑区域

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

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

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

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

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

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

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

命令macwin
在当前打开文件列表中选择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 + 0Focus into side Bar | 聚焦于侧边栏,那切换编辑器组方向就只能是cmd + option + 0

命令macwin
在当前打开文件列表中选择ctrl + tabctrl + tab
切换为当前文件中的下一个 | Open Previous Editorcmd + option + ← (自定义了 ctrl + option + ← )
切换为当前文件中的上一个 | Open Next Editorcmd + option + →(自定义了 ctrl + option + → )

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

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

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

命令总览
命令macwin
Split Editor | 拆分编辑器Cmd + \Ctrl + \
Split switch | 切换编辑器组中的当前编辑器Cmd + [组数]Ctrl + [组数]
Flip Editor Group Layout | 切换垂直/水平编辑器布局Cmd + Option + 0Shift + Alt + 0
切换
命令macwin
Split switch | 切换编辑器组中的当前编辑器Cmd + [组数]Ctrl + [组数]

切换编辑器组方向

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

命令macwin
Flip Editor Group Layout | 切换垂直/水平编辑器布局Cmd + Option + 0Shift + Alt + 0

编辑器组管控文件

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

命令macwin
Move Editor into Previous Group | 将当前文件移动到上一个编辑器cmd + ctrl + ←ctrl + tab
Move Editor into Next Group | 将当前文件移动到下一个编辑器cmd + ctrl + ←
切换当前处理文件
命令macwin
在当前打开文件列表中选择ctrl + tabctrl + tab
切换为当前文件中的下一个 | Open Previous Editorcmd + option + ← (自定义了 ctrl + option + ← )
切换为当前文件中的上一个 | Open Next Editorcmd + option + →(自定义了 ctrl + option + → )

移动当前文件至编辑器中的左右编辑组项
命令macwin
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 + 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 中对搜索功能的梳理,限于篇幅,将会在下一篇文章中以短文(工具文)的形式出现

终端区域

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

命令macwin
唤起终端 | 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 + ←
唤起终端

已唤起状态下新建终端

聚焦于终端

聚焦于上/下一终端

侧边栏区域

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

命令macwin
展示/隐藏侧边栏Cmd + BCtrl + B

总结

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

更多关于VSCode的相关知识,请访问:vscode基础教程!

以上就是带你了解vscode中的【空间控制】的详细内容,更多请关注gxlsystem.com其它相关文章!

标签 VSCode