Hyac 开发四：我与Monaco Editor + Lsp 的爱恨情仇
写在前面
如果你要做web代码编辑器，那么你第一个踩的坑就是 —— Monaco，有时候及时放弃才是一种好习惯
最近在开发 Hyac，由于需要支持Python在线编辑，同时我还希望能够支持Lsp，因此不得不选择一款web编辑器，我与Monaco的爱恨情仇从此开始……
为什么是 Monaco Editor
目前市面上可用的web编辑器项目不多，大概只有以下这三款：
通过了解，Monaco 项目是从 VS Code 项目中分离出来的一个在线代码编辑器，我就无条件的信任了Monaco，现在回想起来，自己就像是一个愚笨的人迷信所谓“专家”一样。
我都做了什么“探索”
使用 Monaco 官方示例
我相信无论任何人接触第一个新的组件、插件、包。首先都会查阅有没有官方示例，即使没有具体的示例也要去看一看有没有官方文档。在刚开始接触的时候，发现除了没有文档以外，简单的创建一个编辑器也还算简单。但当我还没来得及开心的时候，第一个问题就来了。由于我的项目是 vue + typescript + vite的结构，monaco对 vite 的支持无限趋近于0。当你想要查看它的文档的时候，你就会惊喜的发现文档就是一团乱麻，不如不看。
我就简单的列举几个问题：
- Monaco 启动的时候需要创建 worker，在 vite 下如果想不报错，必须要使用 vite-plugin-monaco-editor-esm
- vite 下很多monaco所需的资源文件找不到
- 原生的 Monaco 对代码高亮的支持很差
- 原生的 Monaco 根本不支持 LSP
- ……
在这种情况下，我只能在社区找有没有第三方的已经实现了 高亮 + Lsp 的方案，还真让我找到了 0.5 个。
使用社区对Monaco的二次封装
下面几个项目都是很好的项目，只是不适合我，并非说他们不好
vue-use-monaco
如果你不需要LSP支持，推荐使用这个，国人开发
这个项目代码高亮使用了 Shiki，对 Monaco 封装已至化境，但奈何缺少LSP灵根，无奈放弃（不支持LSP）。
monaco-vue
这个项目与上面的项目类似，但是这个项目对Monaco的封装更轻，基本保留Monaco的用法。奈何同样缺少LSP的支持，并且如果在此基础上进行修改，会破坏项目的结构。遂放弃……
codingame 的 monaco
这个就厉害了，相当于将 Monaco 完全重构，从最基础的 core 到高亮、LSP、第三方语言支持等，一应俱全。那么为什么最终没有确定使用它呢？主要是在完全抄官方示例都会疯狂报错，只能说在结合LSP之后，处在一个能用，但不好用的程度。鸡肋、食之无味弃之可惜（其实是我太菜了，用不好 codingame 的 monaco）。
结论
如果你想要使用 高亮、多语言、多主题，那么推荐你使用vue-use-monaco，如果需要LSP，那么酌情考虑codingame 的 monaco。当你想基于Monaco开发之前，你就要做好AI的回答“也并不靠谱”的准备。在被 monaco 毒打之后，我真的没招了，接下来只能将开发方向转向 CodeMirror
转向 CodeMirror
转向 CodeMirror（以下简称CM） 之后才发现，CM 天生支持ES6，引入包变得超级简单，不用将时间和精力浪费在解决开发环境的问题，不用处理worker，不用处理前端资源加载等问题。同时 CM 官方维护了很多插件，基本能满足所有的要求。而且AI对CM的支持远远高于Monaco，即使如此 CM 也并不是 100% 完美，它在界面的美观度方面明显不如 Monaco，但是我知足了，因为能给我的生命省下来几个小时，何乐而不为呢？
写在后面
以上讲述的内容都是围绕前端展开，有关python的LSP 后端我会抽空将其从 Hyac 项目中剥离出来，就这样吧。
wicos 2025/07/30