点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

❝

👇 该文章内容的受众是VSCode的用户，不满足条件的同学可以选择性阅读哈~

❞

❓现存的痛点

VSCode是我的主力开发工具，在实际的开发中，我经常会对编辑器进行分栏处理，组件A的tsx、css代码、工具类方法各一个窗口，组件B的tsx、css代码、工具类方法各一个窗口，组件C的......

当组件拆的足够多的时候，多个分栏会把本就不大的编辑器窗口分成N份，每一份的可视区域就小的可怜，切换组件代码时，需要不小的翻找成本，而且经常忘记我之前把文件放在了那个格子里，特别是下面的场景（一个小窗口内开了N个小tab），此时更难找到想要的窗口了...

问题汇总

1. 分栏会导致每个窗口的面积变小，开发体验差（即使可以双击放大，但效果仍不符合预期）；
2. 编辑器窗口容易被新打开的窗口替换掉，常找不到之前打开的窗口；
3. 窗口的可操作性不强，位置不容易调整。

💡解题的思路

1. 自由 & 独立的编辑器窗口

❝

1. 分栏会导致每个窗口的面积变小，开发体验不好。

❞

那就别变小了！每个编辑器窗口都还是原来的大小，甚至更大!

2. 无限画布

❝

2. 编辑器窗口容易被新打开的窗口替换掉，常找不到之前打开的窗口。
   
3. 窗口的可操作性不强，位置不容易调整。

❞

那就每个窗口都拥有一个自己的位置好了！拖一下就可以找到了！

3. 画布体验

❝

好用的画布是可以较大的提升用户体验的，下面重点做了四个方面的优化：

❞

3.1 在编辑器里可以快速缩小 & 移动

❝

因为不可避免的会出现一些事件冲突（比如编辑器里的滚动和画布的滚动、缩放等等），通过提供快捷键的解法，可以在编辑器内快速移动、缩放画布。

command + 鼠标上下滑动 = 缩放
option + 鼠标移动 = 画布移动

注意下图，鼠标还在编辑器窗口中，依然可以拖动画布👇🏻

❞

3.2 快速放大和缩小编辑窗口

❝

通过快捷按钮的方式，可以快速的放大和缩小编辑器窗口。

❞

3.3 一键定位到中心点

❝

不小心把所有窗口都拖到了画布视口外找不到了？没事儿，可以通过点击快捷按钮的方式，快速回到中心点。

❞

3.4  窗口的合并和分解

❝

可以在窗口下进行编辑器的合并，即可以简单的把一些常用的窗口进行合并、分解。

❞

💬 提出的背景

作为一名前端开发同学，避免不了接触UI同学的设计稿，我司使用的就是figma，以figma平台为例，其无限画布模式可以非常方便的平铺N个稿子，并快速的看到所有稿子的全貌、找到自己想要的稿子等等，效果如下：

没错！我就是基于这个思路提出了第一个想法，既然图片可以无限展示，编辑器为什么不能呢？

这个想法其实去年就有了，期间大概断断续续花了半年多左右的时间在调研和阅读VSCode的源码上，年后花了大概3个月的时间进行实现，最终在上个月做到了上面的效果。

经过约一个月的试用（目前我的日常需求均是使用这种模式进行的开发），发现效果超出预期，我经常会在画布中开启约10+个窗口，并频繁的在各个窗口之间来回移动，在这个过程中，我发现以下几点很让我很是欣喜：

1. 空间感：我个人对“空间和方向”比较敏感，恰好画布模式会给我一种真实的空间感，我仿佛在一间房子里，里面摆满了我的代码，我穿梭在代码中，修一修这个，调一调这个~

2. 满足感：无限画布的方式，相当于我间接拥有了无限大的屏幕，我只需要动动手指找到我的编辑窗口就好了，它可以随意的放大和缩小，所以我可以在屏幕上展示足够多的代码。

3. 更方便的看源码：我可以把源码的每个文件单独开一个窗口，然后把每个窗口按顺序铺起来，摆成一条线，这条线就是源码的思路（当然可以用截图的方式看源码 & 缕思路，但是，需要注意一点，这个编辑器是可以交互的！）

⌨️ 后续的计划

后续计划继续增强画布的能力，让它可以更好用：

1. 小窗口支持命名，在缩小画布时，窗口缩小，但是命名不缩小，可以直观的找到想要的窗口。

2. 增强看源码的体验：支持在画布上添加其他元素（文案、箭头、连线），试想一下，以后在看源码时，拥有一个无限的画板来展示代码和思路，关键是代码是可以交互的，这该有多么方便！

3. 类似MacOS的台前调度功能：把有关联的一些窗口分组，画布一侧有分组的入口，点击入口可以切换画布中的组，便于用户快速的进行批量窗口切换，比如A页面的一些JS、CSS等放在一个组，B页面放在另一个组，这样可以快速的切换文件窗口。

📔 其他的补充

调研过程中发现无法使用VSCode的插件功能来实现这个功能，所以只好fork了一份VSCode的开源代码，进行了大量修改，最终需要对源码进行编译打包才能使用（一个新的VSCode），目前只打包了mac的arm64版本来供自己试用。

另外，由于VSCode并不是100%开源（微软的一些服务相关的逻辑是闭源的），所以github上的开源仓库只是它的部分代码，经过编译之后，发现缺失了远程连接相关的功能，其他的功能暂时没有发现缺失。

🦽 可以试用吗

目前还没有对外提供试用版的打算，想自己继续使用一些时间，持续打磨一下细节，等功能细节更完善了再对外进行推广，至于这次的软文~ 其实是希望可以引起阅读到这里的同学进行讨论，可以聊一下你对该功能的一些看法，以及一些其他的好点子~，thx~

🫡 小小的致敬

• 致敬VSCode团队，在阅读和改造他们代码的过程中学习到了不少hin有用的代码技能，也正是因为有他们的开源，才能有我的这次折腾👍🏻
• 致敬锤子科技罗永浩老师，这次实现思路也有借鉴当年发布的“无限屏”功能，本文的头图就是来自当年的发布会截图。

往期推荐

Vue反编译dist包到源码
5 万star！是时候升级下你的终端工具了！
简化你的工作，7 种常用的 JS 代码片段

最后

• 欢迎加我微信，拉你进技术群，长期交流学习...
  

• 欢迎关注「前端Q」,认真学前端，做个专业的技术人...

点个在看支持我吧