编辑器中调整ts脚本位置,如何自动更新相关的import路径?

先来一个广告,everything插件目前支持了该功能,视频介绍看这里,也欢迎关注我的公众号

完善这个功能的主要原因是,我会在编辑器中修改ts脚本的目录结构,import没有更新,就导致非常恶心,还得回头一个个手动fix,当然可能你有更好的解决方案,而我只是选择了目前这个办法。

接下来是插件干货时间,介绍下其中涉及到的技术难点,整体实现思路

  1. 检索到ts脚本发生了位置移动
  2. 使用三方库分析ts代码,然后自动修正import的问题

大致就是这2个步骤,思路非常清晰。

1. 怎么知道文件发生了移动?

但其实第一步都已经难住我了,然后翻烂了插件文档,又盘了很久的消息管理器:

最终只发现有一个

是的,这个是我们需要的,但是很不幸,它是request,不是broadcast,意味这其他插件是无法感知到的!然后这件事就陷入了死胡同?怎么办?

只能另辟蹊径,编辑器是基于electron做的,他的ipc消息本质上都是经过ipcRender、ipcMain的接口派发出去的,那有没有办法,我直接把ipc的接口给注入一段逻辑,这样就能拿到编辑器所有的消息了,这个思路简直就像开了挂一样,无敌的存在。

具体怎么做呢?直接上核心代码:

let ori = ipcMain.emit.bind(ipcMain);
ipcMain.emit = (...args: any[]) => {
  // 做自己爱做的事情
  return ori(...args);
};

剩下的逻辑只需要分析参数就行了,至此,就成功捕获到那个request的参数,知道文件的移动信息了。

2. 使用三方库自动fix import

这一步的难度相对就低很多了,直接问AI,他会告诉你很多库都能实现,我选择的是ts-morph,具体fix import的逻辑,这里就不再展开了,AI比我讲的更加明白。

以上就是该功能实现的核心难点分析,总之,在编辑器提供API能力有限的情况下,做一些很骚的操作,难度还是非常高的,不过基于electron的角度去开发功能,会打开更多的思路。

everything插件集成了我开发中遇到的效率痛点,有需要的老铁,谢谢支持。

2赞

我选择在vscode里调整,会自动更新import路径 :no_mouth:

WebStorm 也可以自动更新路径 :rofl: 专业的事情交给专业的软件做 :blush:

事实上creator3.7之后的版本已经内置了该功能,只不过存在bug

最初我也这么玩,拿时间换效率,问题不大,后来就忍不了了

所以弄了这么多插件 :rofl:

一言难尽,不要再提了

高产似母猪