VSCode无限画布模式(可能会惊艳到你的一个小功能)
❓现存的痛点
VSCode
是我的主力开发工具,在实际的开发中,我经常会对编辑器进行分栏处理,组件A的tsx、css代码、工具类方法各一个窗口
,组件B的tsx、css代码、工具类方法各一个窗口
,组件C的......
当组件拆的足够多
的时候,多个分栏会把本就不大的编辑器窗口分成N份,每一份的可视区域就小的可怜
,切换组件代码时,需要不小的翻找成本
,而且经常忘记我之前把文件放在了那个格子里,特别是下面的场景(一个小窗口内开了N个小tab
),此时更难找到想要的窗口了...
问题汇总
- 分栏会导致每个窗口的
面积变小
,开发体验差(即使可以双击放大,但效果仍不符合预期); - 编辑器窗口
容易被新打开的窗口替换掉
,常找不到之前打开的窗口; - 窗口的可操作性不强,
位置不容易调整
。
💡解题的思路
1. 自由 & 独立的编辑器窗口
分栏会导致每个窗口的面积变小
,开发体验不好。
那就别变小了!
每个编辑器窗口都还是原来的大小,甚至更大!
2. 无限画布
编辑器窗口容易被新打开的窗口替换掉
,常找不到之前打开的窗口。窗口的可操作性不强,位置不容易调整。
那就每个窗口都拥有一个自己的位置
好了!拖一下就可以找到了!
3. 画布体验
好用的画布是可以较大的提升用户体验的,下面重点做了四个方面的优化:
3.1 在编辑器里可以快速缩小 & 移动
因为不可避免的会出现一些
事件冲突
(比如编辑器里的滚动和画布的滚动、缩放等等),通过提供快捷键的
解法,可以在编辑器内快速移动、缩放
画布。command + 鼠标上下滑动 = 缩放
option + 鼠标移动 = 画布移动
注意下图,鼠标还在编辑器窗口中,依然可以拖动画布👇🏻
3.2 快速放大和缩小编辑窗口
通过快捷按钮的方式,可以快速的放大和缩小编辑器窗口。
3.3 一键定位到中心点
不小心把所有窗口都拖到了画布视口外找不到了?没事儿,可以通过点击快捷按钮的方式,快速回到中心点。
3.4 窗口的合并和分解
可以在窗口下进行编辑器的合并,即可以简单的把一些常用的窗口进行合并、分解。
💬 提出的背景
作为一名前端开发同学
,避免不了接触UI同学的设计稿,我司使用的就是figma
,以figma
平台为例,其无限画布模式可以非常方便的平铺N个稿子,并快速的看到所有稿子的全貌、找到自己想要的稿子等等,效果如下:
没错!我就是基于这个思路提出了第一个想法,既然图片可以无限展示,编辑器为什么不能呢?
这个想法其实去年就有了,期间大概断断续续花了半年多左右的时间在调研和阅读VSCode的源码上,年后花了大概3个月的时间进行实现,最终在上个月做到了上面的效果。
经过约一个月的试用(目前我的日常需求均是使用这种模式进行的开发)
,发现效果超出预期
,我经常会在画布中开启约10+
个窗口,并频繁的在各个窗口之间来回移动
,在这个过程中,我发现以下几点很让我很是欣喜:
空间感
:我个人对“空间和方向”比较敏感,恰好画布模式会给我一种真实的空间感
,我仿佛在一间房子里,里面摆满了我的代码,我穿梭在代码中,修一修这个,调一调这个~满足感
:无限画布的方式,相当于我间接拥有了无限大的屏幕,我只需要动动手指找到我的编辑窗口就好了,它可以随意的放大和缩小,所以我可以在屏幕上展示足够多的代码。更方便的看源码
:我可以把源码的每个文件单独开一个窗口,然后把每个窗口按顺序铺起来,摆成一条线,这条线就是源码的思路(当然可以用截图的方式看源码 & 缕思路,但是,需要注意一点,这个编辑器是可以交互的!)
⌨️ 后续的计划
后续计划继续增强画布
的能力,让它可以更好用:
小窗口支持命名
,在缩小画布时,窗口缩小,但是命名不缩小,可以直观的找到想要的窗口。增强看源码的体验
:支持在画布上添加其他元素(文案、箭头、连线),试想一下,以后在看源码时,拥有一个无限的画板来展示代码和思路,关键是代码是可以交互的,这该有多么方便!类似MacOS的台前调度功能
:把有关联的一些窗口分组,画布一侧有分组的入口,点击入口可以切换画布中的组,便于用户快速的进行批量窗口切换,比如A页面的一些JS、CSS等放在一个组,B页面放在另一个组,这样可以快速的切换文件窗口。
📔 其他的补充
调研过程中发现无法使用VSCode的插件功能来实现这个功能,所以只好fork了一份VSCode的开源代码,进行了大量修改,最终需要对源码进行编译打包才能使用(一个新的VSCode),目前只打包了mac的arm64版本来供自己试用。
另外,由于VSCode并不是100%开源(微软的一些服务相关的逻辑是闭源的),所以github上的开源仓库只是它的部分代码,经过编译之后,发现缺失了远程连接相关的功能,其他的功能暂时没有发现缺失。
🦽 可以试用吗
目前还没有对外提供试用版的打算
,想自己继续使用一些时间,持续打磨一下细节,等功能细节更完善了再对外进行推广,至于这次的软文~ 其实是希望可以引起阅读到这里的同学进行讨论,可以聊一下你对该功能的一些看法,以及一些其他的好点子~
,thx~
🫡 小小的致敬
- 致敬VSCode团队,在阅读和改造他们代码的过程中学习到了不少hin有用的代码技能,也正是因为有他们的开源,才能有我的这次折腾👍🏻
- 致敬锤子科技罗永浩老师,这次实现思路也有借鉴当年发布的“无限屏”功能,本文的头图就是来自当年的发布会截图。
来源:juejin.cn/post/7375586227984220169