本文主要是介绍开篇: 为什么要做这个项目？，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
背景
最近工作中遇到一个需求需要实现一版在线的Web编辑器，类似 Vue Playground 的效果，但是Vue playground 整体体验下来不是很好，和本地 VSCode 编辑器开发体验差距较大(虽然理解在线编辑器没必要完全照着本地开发体验来)。
经过多方体验调研，发现目前的业界方案主要两种:
- 基于Monaco / Codemirror 实现，也是大多数场景使用的方案，但是效果却是参差不齐，很多的能力也有缺失，很难找到一个满足需求并且开放扩展性较好的方案；
- 基于VSCode编辑器，或者CodeSandbox 的方案，但是初步开发入手成本较高，编辑器本身内容很丰富，开发体验也最接近本地编辑器(但是大部分在Web端用不上)。扩展能力通过VS Code 插件进行处理也不是很方便开发，定制扩展性不够。
在调研过程中，也发现了一个用于对VSCode 编辑器进行 overlay 的包，能够比较方便在运行起VSCode项目，同时对一些能力进行删减，定制等，但是整体体验下来还是有些问题，一些私有化场景的定制难以实现。这里附上其github链接，有兴趣的可以参考尝试 monaco-vscode-api
预期的效果
这里说一下我希望的一个编辑器效果是什么样的:
- 开发体验尽可能的贴近本地VS Code开发，功能上只需要包括核心的部分能力
- 能够是一个组件形式的，现在前端开发大部分都是 Vue/React 框架基础上进行的，面向组件的使用方式是最容易上手接入的；
- 使用足够简单，能够按需使用，比如只需要编辑器部分，文件系统部分等。
- 扩展性足够，能够基于组件进行扩展，提供自定义的能力
- 简化配置，Monaco编辑器要使用还是需要有一些配置的，能够尽可能的简化掉
最后
经过调研和体验下来，并没有能够找到一款完全符合我预期的编辑器产品，最终决定下来自己来做这么一个编辑器，一方面解决当前的工作问题，也将这个项目的流程和开发实现中遇到的问题提取出来，帮助有需要的人。
这里也简单介绍写这个项目实现的功能部分:
- 基于Monaco实现的前端代码编辑器(包括Vue语言的支持)
- 内存文件系统管理，包括文件创建，目录创建，重命名，文件移动等等
- 在线依赖安装，并且能够对编辑器提供包类型提示支持
- 代码搜索，类似VSCode编辑器的文件搜索，内容替换等能力
- 多编辑器代码分栏编辑
- Prettier 代码自动格式化
项目采用的技术方案:
- Monaco-Editor
- Vue3 + Vite5
- ant-design-vue4
项目最终会封装成一个Vue3组件包的形式，支持按需使用和扩展，最后附上一张最后的效果图:
这篇关于开篇: 为什么要做这个项目？的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
