如何将完整VSCode嵌入VueJS web应用，需提取其代码库哪些部分？

核心提取范围 #

如果你选择直接从VSCode官方源码手动拆解，需要提取以下几部分核心逻辑：

• Monaco Editor 基础编辑器内核：这是VSCode所有文本编辑、语法高亮、代码补全能力的底层底座，对应源码src/vs/editor目录，官方也有独立发布的预构建包，不需要手动拆解可直接引入。
• Web 端工作bench逻辑：对应源码src/vs/workbench目录，你只需要保留多标签页管理、文件树渲染、编辑器组布局相关的逻辑，剔除所有桌面端Electron相关的窗口管理、本地进程通信逻辑，以及VSCode原生的顶部菜单栏、标题栏逻辑，避免和你自己开发的顶部导航栏冲突。
• 主题服务模块：对应源码src/vs/platform/theme目录，提取主题配色、图标主题的解析与渲染逻辑，保证嵌入的编辑器可以兼容原生VSCode的主题生态，体验和桌面版一致。
• 扩展宿主（可选）：如果你的应用需要支持VSCode生态的扩展插件，需要提取src/vs/workbench/services/extensions下的Web端扩展宿主实现，剔除所有依赖Node.js API的扩展能力，只保留浏览器环境可运行的扩展沙箱逻辑。

Vue项目适配注意事项 #

• 你不需要完整复用VSCode的全局布局体系，只需要把提取后的VSCode工作区实例挂载到顶部导航栏下方的空白DOM节点即可，直接覆盖VSCode原生的根布局逻辑。
• 把VSCode原生对接本地磁盘的文件服务全部重写，对接你自己应用的后端文件存储接口，不需要保留本地文件读写的相关逻辑。
• 打包时注意将编辑器的Web Worker（用于语法校验、代码补全等计算型逻辑）和Vue主应用的代码包分开打包，避免Worker加载阻塞主应用渲染，拖慢页面启动速度。

内容的提问来源于stack exchange，提问作者ARTester403