你不知道的vscode之空间控制

你不知道的vscode之空间控制
公众号「 微医大前端技术 」

56.gif

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

前言

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

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

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

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

thread_214569626974086_20201111223938_s_165211_o_w_136_h_130_26209

系列文章目录

对于 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 区域总览

image-20211128155250462

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

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

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

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

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

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

编辑区域

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

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

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

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

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

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

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

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

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

2021-11-28 18.14.47

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

2021-11-28 18.15.23

命令执行

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

img

​ 我们思考下,在 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 + → )

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

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

img

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

命令总览

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

切换

命令macwin
Split switch | 切换编辑器组中的当前编辑器Cmd + [组数]Ctrl + [组数]

img

切换编辑器组方向

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

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

img

编辑器组管控文件

​ 我们知道了编辑器组本身的支持功能,那颗粒度更细一点,编辑器组对文件的支持呢?编辑器组内的文件颗粒度是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 + → )

img

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

命令macwin
Move Editor into Previous Group | 将当前文件移动到上一个编辑器cmd + ctrl + ←ctrl + tab
Move Editor into Next Group | 将当前文件移动到下一个编辑器cmd + ctrl + ←

img

命令面板区域

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

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

img

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

命令划分:特殊标识

特殊标识对应策略快捷键 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 中对搜索功能的梳理,限于篇幅,将会在下一篇文章中以短文(工具文)的形式出现

v2-ca78f82f8e8591fc7059a87a47d0eda0_720w

终端区域

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

命令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 + ←

唤起终端

2021-11-29 00.30.44

已唤起状态下新建终端

2021-11-29 00.31.08

聚焦于终端

2021-11-29 00.31.26

聚焦于上/下一终端

2021-11-29 00.31.47

侧边栏区域

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

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

2021-11-29 00.36.48

总结

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

v2-86c9769b32e57b445651c9ddd1e9f409_720w

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改