开篇: 为什么要做这个项目？

背景

最近工作中遇到一个需求需要实现一版在线的Web编辑器，类似 Vue Playground 的效果，但是Vue playground 整体体验下来不是很好，和本地 VSCode 编辑器开发体验差距较大(虽然理解在线编辑器没必要完全照着本地开发体验来)。
经过多方体验调研，发现目前的业界方案主要两种:

1. 基于Monaco / Codemirror 实现，也是大多数场景使用的方案，但是效果却是参差不齐，很多的能力也有缺失，很难找到一个满足需求并且开放扩展性较好的方案；
2. 基于VSCode编辑器，或者CodeSandbox 的方案，但是初步开发入手成本较高，编辑器本身内容很丰富，开发体验也最接近本地编辑器(但是大部分在Web端用不上)。扩展能力通过VS Code 插件进行处理也不是很方便开发，定制扩展性不够。

在调研过程中，也发现了一个用于对VSCode 编辑器进行 overlay 的包，能够比较方便在运行起VSCode项目，同时对一些能力进行删减，定制等，但是整体体验下来还是有些问题，一些私有化场景的定制难以实现。这里附上其github链接，有兴趣的可以参考尝试 monaco-vscode-api

预期的效果

这里说一下我希望的一个编辑器效果是什么样的:

1. 开发体验尽可能的贴近本地VS Code开发，功能上只需要包括核心的部分能力
2. 能够是一个组件形式的，现在前端开发大部分都是 Vue/React 框架基础上进行的，面向组件的使用方式是最容易上手接入的；
3. 使用足够简单，能够按需使用，比如只需要编辑器部分，文件系统部分等。
4. 扩展性足够，能够基于组件进行扩展，提供自定义的能力
5. 简化配置，Monaco编辑器要使用还是需要有一些配置的，能够尽可能的简化掉

最后

经过调研和体验下来，并没有能够找到一款完全符合我预期的编辑器产品，最终决定下来自己来做这么一个编辑器，一方面解决当前的工作问题，也将这个项目的流程和开发实现中遇到的问题提取出来，帮助有需要的人。

这里也简单介绍写这个项目实现的功能部分:

• 基于Monaco实现的前端代码编辑器(包括Vue语言的支持)
• 内存文件系统管理，包括文件创建，目录创建，重命名，文件移动等等
• 在线依赖安装，并且能够对编辑器提供包类型提示支持
• 代码搜索，类似VSCode编辑器的文件搜索，内容替换等能力
• 多编辑器代码分栏编辑
• Prettier 代码自动格式化

项目采用的技术方案:

• Monaco-Editor
• Vue3 + Vite5
• ant-design-vue4

项目最终会封装成一个Vue3组件包的形式，支持可插拔按需使用和扩展。