• 技术文章 >开发工具 >VSCode

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

    青灯夜游青灯夜游2022-11-15 20:00:01转载190

    php入门到就业线上直播课:进入学习

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

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

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

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

    vscode 区域总览

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

    编辑区域

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

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

    对于第一个问题,可以通过一类快捷键实现;而对于第二个问题,在 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中的【空间控制】的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:VSCode
    上一篇:vscode插件分享:5个工作插件+5个摸鱼插件 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 手把手教你在VScode中配置C/C++环境(Win下)• vscode不支持es6语法怎么办• 配置详解:vscode中远程调试c++• 值的了解的一些vscode光标操作,让开发如丝般顺滑!• vscode如何连接远程服务器?(图文教程)
    1/1

    PHP中文网