在我分享这三个插件之前,我犹豫了一下。因为我怕会被别人说——“啥玩意,这种AI小垃圾也敢端上来,真是浪费劳资的时间。”所以如果本评论下真的有人评论说了类似的话,那么我在这里统一回复:“您说的没错,这三个玩意确实属于AI小垃圾,和大佬们的AI工作流根本没法比,真是属于班门弄斧。”
不过想到或许这三个插件也能让其他人每天多摸鱼十分钟。一个人多摸鱼十分钟,十个人就是一百分钟了,那一百人就是一千分钟了。累计下来都可以实现共产主义了。我还是决定不顾风险的分享出来。
第一个插件:快速拷贝给AI(https://github.com/xiayangqun/QuickCopyForVSCode)
在AI编程刚兴起的时候。copilot无疑是其中的潮头浪子,由于其与VS Code深度绑定,所以最先进入了开发者的视野。使用copilot的体验是非常丝滑的。
你可以在函数内部按下cmd+i直接呼出内部编辑窗口——“帮我实现这个函数”
你也可以框选住几行代码按下cmd+i呼出内部窗口——“这几行代码似乎不对,你修复一下”。
你也可以在右侧的对话框内输入要求,copilot会捕获到你当前打开的文件和光标停留的行数作为上下文来更好的理解你的意图。
可惜后来copilot拉完了,被其他编程代理甩到了身后,笔者此后先后尝试kimi code, opencode, claude code等众多的编程代理,最后终于稳定的停留在里codex里。这些编程代理有些有vs code扩展(大部分vs code和本体app相比都很简陋,想要体验完整的功能只靠vs code扩展是不够的),有些只有TUI终端,有些只有独立App。在使用这些编程代理的过程中,让笔者感到一个非常不舒服的点出现了。怎么快速的让它们知道,在哪里插入代码呢?我现在说的代码片段。是在哪个文件的哪一行,怎么快速让它们获得呢。
于是我只能分成好几部步去做。
- 复制几句关键的代码到编程代理的输入框中。
- 在vscode的文件管理器右键脚本——复制完整路径。再黏贴到编程代理去。
- 编辑一下文字,这几句代码位于XXX/YYY/ZZZ.ts下,请你做一下处理。
在这个过程中我的鼠标移动顺序是:VSCode->编程代理->VSCode->编程代理
这个操作让我厌烦到不行。于是我让AI帮我写了这个VSCode的扩展。安装它之后,只需要快速的两次按下复制组合键cmd+c。就可以在vscode里看到“已经触发拷贝给AI”的提示。这会在剪切板里多塞了当前文件的绝对路径名字和文件行号。于是你直接复制到编程代理里去就是这样子的信息:
“文件完整路径:/xx/yyyy/README.md
文件行数:59行
“## 打包 vsix””
通过这个小工具,我的鼠标移动顺序就变成了:VSCode->编程代理。这个工具在每一次复制的时候能节约掉我5秒的时间。一天下来,又多了好几分钟可以摸鱼了。
(PS: 如果你还是秉持着半古法编程,会手写和AI写带代码结合着来,这个插件我是非常推荐安装的,但是如果你已经是AI大牛,代码文件根本看都不看了,那这个插件对于你来说就不适合了。)
第二个插件:图片九宫格裁剪和拉伸(https://github.com/xiayangqun/Image9ScaleVSExtensions)
AI时代做一个产品不难。难的是你做的东西是否有用,更重要的是形态是否合适。九宫格编辑不用想都知道肯定是一个有用的功能。这个小功能确实是我需要的,但是以什么形式来呈现,我确实思考了半天。
以Creator扩展来做首先就被我否定了。我要编辑的图片难道一定会在creator项目里吗?
然后我又想到了用python来做个独立app,但是考虑了一会,我还是摇了摇头,独立app这个东西太重了。所以这个东西呈现的形态最终还是一个轻量的VS Code扩展。
在VS Code里点击一个图片,会在底部出现2个按钮
通过这个小工具,我的鼠标移动顺序就变成了:VSCode->编程代理。这个工具在每一次复制的时候能节约掉我5秒的时间。一天下来,又多了好几分钟可以摸鱼了。
(PS: 如果你还是秉持着半古法编程,会手写和AI写带代码结合着来,这个插件我是非常推荐安装的,但是如果你已经是AI大牛,代码文件根本看都不看了,那这个插件对于你来说就不适合了。)
第二个插件:图片九宫格裁剪和拉伸(https://github.com/xiayangqun/Image9ScaleVSExtensions)
AI时代做一个产品不难。难的是你做的东西是否有用,更重要的是形态是否合适。九宫格编辑不用想都知道是肯定是一个有用的功能。这个小功能确实是我需要的,但是以什么形式来呈现,我确实思考了半天。
以Creator扩展来做首先就被我否定了。我要编辑的图片难道一定会在creator项目里吗?
然后我又想到了用python来做个独立app,但是考虑了一会,我还是摇了摇头,独立app这个东西太重了。所以这个东西呈现的形态最终还是一个轻量的VS Code扩展。
在VS Code里点击一个图片,会在底部出现2个按钮
点击九宫格裁切,则进入裁剪模式(这个模式大家懂的都懂,我没什么好介绍的)
值得介绍的是这个九宫格拉伸模式。它和裁切相反,会把图片放大而不是缩小。
好奇的你,肯定会问了:什么情况下会需要用到这种模式哦?你这玩意不是给自己找不痛快吗。说到这里,我就不得不吐槽一下ProgressBar这个组件了。如下图所示。这是一个裁剪好的进度条。中间的部分已经被裁掉了,现在是一个很短的条子。

现在我要用它来做进度条。我设置精灵为SLICEND模式。加上ProgressBar。似乎很顺利。进度为100%的时候,它长这个样子。目前一切都很顺利。

现在我设置为50%了,它长这个样子

现在似乎不太对了。这种填充方式不是我想要的,我想要那种FILLED的填充。于是我修改一下ProgressBar和Sprite的各项属性到FILLED上。现在50%长这个样子的。

填充方式是对的。从左往右填充。但是左边的圆角变形了,因为整个精灵的显示方式目前是按照SIMPLE来的。也就是说在这种填充模式下,精灵是不能九宫格拉伸的,只能SIMPLE拉伸。那么为了解决这个问题。我只能将原图片本身给拉长一下。类似于下边这个效果,然后再导入到游戏中使用
第三个插件:Agent Hub(https://github.com/xiayangqun/AgentHubForVSCode)
正如我之前说所说的,我现在的主力开发平台已经是Codex了,同时也会用VS Code去review代码。虽然Codex也有VSCode的扩展,但是功能并不齐全,我还是决定使用Codex App来干活。所以我现在的工作流就是在VSCode和Codex之间来回切换。这就造成了时间上的浪费,我要在程序坞里找到VSCode的图标和 Codex的图标来回点击切换,很烦人。而且我还开着Creator编辑器,网页预览。这种微小的时间累计起来一天也够多摸几分钟鱼的。
于是我想了想,为什么不能将Codex嵌入到VSCode的一个页面里去呢。Codex就像一个文件预览一样在VSCode里。这样子我就全程在VSCode里去操作了。这样子不是美滋滋吗。于是我找到GPT 6.0 luna告诉了它我的想法。
“VSCode目前没法这样子做呢。不过他有app-server,我可以为你编写一个webView网页,链接Codex的app-server,做到读取会话和输入文字。”
第一个版本很快就做了出来,我打开之后感觉还做的有模有样的。但是和原本App还是有不小的差距。我思考了片刻。觉得这个方案是个坑。我原本的目的只是想要快速切换。而你现在给我复刻了个app出来。如果codex后续还有更新功能。这个方案就是无尽的去添加新功能了。
于是我果断停止了这个方案。换了个思路。要求在点击到codex的标签的时候,codex会自动的移动到vscode的位置并且前置。而且我移动vscode窗口的时候,codex也跟随一起移动。很快第一版本也做了出来,Codex确实出现在了VSCode窗口的位置,且跟随着VSCode一起移动 ,但是它始终被VSCode压在下边了。修了好几轮都修不好这个问题。
我又想了想。”跟随着VSCode一起移动”这个需求是没有必要存在的。只要我点codex的标签的时候,它出现在VSCode的位置和前置就好了。何必要求他也随着VSCode一起移动呢。
这个版本很快就完成了,效果也让我十分满意。相信这个插件又能每天让我多摸五分钟的鱼了。

最后的最后:这三个插件只在mac电脑上楼主验证过,尤其是第三个插件只适配了mac,使用windows的小伙伴自己找AI给你加windows的适配,然后最好能提个pr给我哈。




