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 告诉我你最想要哪个功能。这一个月的心血,希望能帮到你。

相关推荐
@大迁世界17 小时前
Firefox 本地模式:localhost 再见了 ?
前端·架构
Cosolar18 小时前
不收费、不加水印、数据归你:我做了个开源的在线简历工具
后端·面试·前端框架
米米商聊19 小时前
同名附件为什么被 Map 覆盖?重复键与一对多索引
前端·javascript
小蒜学长20 小时前
基于Spring Boot+Vue3的在线医疗咨询系统的设计与实现(代码+数据库+LW)
java·spring boot·后端·在线问诊·在线医疗咨询系统
echome88820 小时前
Python 异常处理:try、else、finally 的正确搭配
开发语言·前端·python·异常处理·编程技巧
时间的情敌20 小时前
OpenLayers 实战|Vue3 + OpenLayers 完整工程案例(加载天地图、要素、弹窗、绘制、WFS)
前端·openlayers
陈随易20 小时前
下载神器!Motrix 停更三年后重写回归
前端·后端·程序员
每天一道题20 小时前
CAP、Raft 与多数派:分布式系统如何达成一致?
分布式·后端·微服务
前端的日常21 小时前
一个人+AI做情侣食谱小程序,0 费用的服务器
前端·后端
计算机魔术师21 小时前
谷歌搜索广告踩刹车,AI广告成为救命稻草
前端