VSCode无限画布模式（可能会惊艳到你的一个小功能） ??? 该文章内容的受众是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有用的代码技能，也正是因为有他们的开源，才能有我的这次折腾????致敬锤子科技罗永浩老师，这次实现思路也有借鉴当年发布的“无限屏”功能，本文的头图就是来自当年的发布会截图。点击关注公众号，“技术干货”及时达！ 阅读原文