vibe coding 一个多月,我把 Claude Code + Pi 做成了桌面 IDE,还给它移植了 VS Code 的编辑体验

先说清楚:这不是广告,是我自己项目的一篇记录文。

我用了一个多月的时间,用 vibe coding 的方式,从零肝出了一个叫 Mcode 的桌面应用。它把 Claude Code 和 Pi 这类 agent 平台,放进了一个完整的桌面 IDE 里------会话管理、实时流式输出、工具审批、计划模式、内置浏览器、文件树、Git、终端,全都打包进一个窗口。

但在这些"主流功能"之外,我在这一个月里偷偷做了不少体验向的优化 。这篇就专门聊聊其中我最舍不得拿出来讲的一块:编辑器。

底子选对了:Monaco,VS Code 同源

做编辑器,我没有从零造轮子,直接选了 Monaco Editor------就是 Visual Studio Code 内部在用的那个编辑引擎。所以从第一行代码开始,它就有 VS Code 那种手感:语法高亮、代码折叠、多光标、智能提示、Command Palette......这些天生自带。

但光有同源引擎还不够,真正爽的编辑体验,靠的是我把 VS Code 的"使用习惯"移植了过来。下面这几个,是我最想安利的。

移植 1:Ctrl+F12,直达实现

写代码读代码最烦的就是追语义:看到一个方法调用,想知道它到底干了啥,得一层层往下点。VS Code 里的 Ctrl+F12(转到实现)特别好用,我就把它做进了 Mcode。

基于语言服务器(LSP)能力,在编辑器里按 Ctrl+F12,光标停在哪个方法上,就直接跳到它的实现位置------跨文件跳转也能用,自动在对应文件、对应行打开。读别人代码(或者说,读 AI 刚写的代码)时特别省事。

移植 2:Alt+← / Alt+→,跳来跳去不怕迷路

这是我觉得最值的一个。VS Code 老用户应该都懂 Alt+←(后退)、Alt+→(前进)的好------尤其当我们频繁"转到定义/实现"去追代码,再按一下就能跳回来。

我把这套编辑导航历史 完整做了出来:每次跳转(转定义、转实现、从文件树打开、从对话里点开某个文件)都会记住你原来在哪个文件哪一行 ,按 Alt+← 一步步退回去,Alt+→ 再前进。读文件读得再深,也不会找不到来时的路。

移植 3:打开文件,记住你上次停在哪

这个细节小,但每天都用得上:重新打开一个文件,自动回到你上次停留的滚动位置和光标处。

不像很多工具每次打开都从文件顶部开始,逼着你重新滚一遍。Mcode 会默默记住每个文件的阅读位置,下次打开直接续上------这个对"每天读大量文件跟踪状态"的人太友好了。

顺手也提一句其他编辑相关的手感

  • Ctrl+S / Cmd+S 保存,走完整保存 + 诊断流程;
  • 配合语言服务器,还有跨文件跳转定义、查引用、悬停看提示、诊断波浪线;
  • Monaco 自带的多光标、代码折叠这些,开箱即用。

总之,就是让你觉得"这编辑器跟 VS Code 一样顺手"。

为什么"读代码"这么重要

做 Mcode 这一年多我最大的体会是:AI 写代码的能力已经很强,但人最终要"读懂"这些代码,才能信任它、review 它、接手它。所以我把编辑器的功夫主要花在"阅读体验"上------跳转、导航历史、记住位置,全是为了让你在一堆文件里进出自如、心里有数。

项目信息

  • 名称:Mcode(免费、开源、MIT)
  • 技术:Electron + React 19 + Monaco + Claude Agent SDK + Pi Coding Agent SDK
  • 一句话:不重新实现 agent,只做完整、顺手的桌面交互界面
  • 🔗 GitHub:github.com/huangbh2020...

如果你也受够了在终端里裸跑 agent、又想有个熟悉顺手的编辑器,欢迎 Star 支持,或者直接提 issue 告诉我你最想要哪个功能。这一个月的心血,希望能帮到你。

相关推荐
孙启超7 分钟前
【AI开发之Rust】第 22 课:一键多平台与工程收尾 —— CI、发布检查与结课
开发语言·后端·rust
admin and root7 小时前
「AI安全篇」实战AntiDebug自动化JS逆向加解密MCP
javascript·人工智能·网络安全·自动化·漏洞挖掘·cnvd·src赏金
一条小小yu7 小时前
Spring IoC的理解
java·后端·spring
前端snow8 小时前
ai agent --- postgreSQL 关系型数据库
前端
茉莉玫瑰花茶8 小时前
GO [ 方法 ]
开发语言·后端·golang
Wx-bishekaifayuan8 小时前
django个性化旅游路线推荐平台49005-计算机课程设计、毕业设计
spring boot·后端·python·django·课程设计·express·旅游
卷无止境9 小时前
ECharts:把数据变成故事的可视化利器
前端
Eric_见嘉9 小时前
在职前端 Skill 和 MCP 分享
前端·后端·agent
liangshanbo12159 小时前
面试题:如何优化 Webpack 的打包速度?
前端·webpack·node.js
wengad9 小时前
从 wangEditor 迁到 wangEditor-next
前端·javascript·vue.js