一、基础概念
Monaco Editor 是微软开源、驱动 VS Code 的浏览器端代码编辑器内核
GitHub：https://github.com/microsoft/monaco-editor
协议：MIT License（商用免费）
⚠️ 官方不支持移动端浏览器
简单关系：
VS Code = Monaco Editor + Electron + 文件系统 + 扩展系统 + 调试等桌面能力
Monaco 就是把 VS Code 的编辑模块剥离出来，单独跑在网页里。
二、核心能力（对标 VS Code 编辑体验）
✅ 语法高亮：内置 JS/TS/Python/Go/CSS/HTML/SQL/JSON 等几十种语言
✅ IntelliSense 智能提示、悬浮文档、跳转定义
✅ 代码折叠、多光标、括号匹配、代码片段 (snippet)
✅ 内置 DiffEditor（代码差异对比视图）
✅ 内置格式化、标记报错（Diagnostic Markers）
✅ 命令面板、快捷键系统、右键菜单自定义
✅ 主题系统（vs / vs-dark / hc-black，可扩展第三方主题）
✅ WebWorker 架构，大文件编辑不阻塞主线程
三、优缺点
✅ 优点
- 编辑体验和 VS Code 完全一致，开发者上手零成本
- 原生支持 LSP（语言服务协议），可以对接后端语言服务实现强语义补全
- API 极其丰富，高度可定制
- Diff 对比开箱即用（在线代码评审场景首选）
❌ 缺点
- 包体积较大（完整包～5MB，需要按需裁剪）
- 移动端兼容差，不适合手机页面嵌入
- Web Worker 配置繁琐，Vite/Webpack 经常需要额外配置
- 启动速度相比 CodeMirror/Ace 略慢
四、主流竞品简单对比
| 项目 | Monaco Editor | CodeMirror 6 | Ace Editor |
|---|---|---|---|
| 开发方 | Microsoft | Marijn Haverbeke | Cloud9 |
| 定位 | 专业代码编辑器（VSCode 内核） | 轻量可扩展文本编辑器 | 轻量编辑器 |
| 智能提示 | 原生强大 IntelliSense | 需要自行封装 | 基础高亮 |
| Diff 对比 | 原生支持 | 需要扩展 | 需要扩展 |
| 体积 | 较大 | 小 | 中等 |
| 适用场景 | WebIDE、在线代码运行平台、代码评审 | 轻量代码框、简单配置编辑器 | 老旧项目、简单展示 |
五、最简原生使用示例（Vanilla JS）
1. 安装
npm install monaco-editor
2. HTML
<div id="container" style="width:800px;height:500px;border:1px solid #ccc;"></div>
3. JS
import * as monaco from 'monaco-editor';
// Vite必须配置worker，Webpack同理
// 创建编辑器实例
const editor = monaco.editor.create(
document.getElementById('container'),
{
value: `function test() {
console.log("hello monaco");
}`,
language: 'javascript',
theme: 'vs-dark', // vs / vs-dark / hc-black
automaticLayout: true, // 容器大小自动适配
minimap: { enabled: true }, // 右侧小地图
readOnly: false,
fontSize: 14
}
);
// 获取当前代码
console.log(editor.getValue());
// 设置代码
editor.setValue('const a = 1;');
// 销毁编辑器（组件卸载必须调用，防止内存泄漏）
// editor.dispose();
六、主流框架封装包（推荐直接使用）
- React：
@monaco-editor/react（社区最流行封装） - Vue3：
monaco-editor-vue3 - 通用懒加载方案：
@monaco-editor/loader（不用处理 worker 复杂配置）
七、典型业务使用场景
- 在线 IDE（如 CodeSandbox、各类云开发平台）
- 后台系统 JSON/YAML 配置编辑器
- 在线代码演示、在线判题系统
- CI/CD 流水线脚本编辑
- 代码评审页面（使用 DiffEditor）
八、常见踩坑提醒
- Worker 404 报错
Vite / Webpack 默认无法自动拷贝 worker 文件，需要配置插件复制node_modules/monaco-editor/min/vs静态资源。 - 页面路由切换必须 dispose () 编辑器实例，否则内存暴涨
- 不要在移动端强行使用，滚动、光标体验很差，优先选 CodeMirror
- 生产环境建议按需剔除不用的语言文件，减小打包体积
如果你需要，我可以提供：
- Vite 完整可运行配置（解决 Worker 报错）
- DiffEditor 代码对比示例
- 自定义代码提示、自定义语法高亮代码
- Vue3 / React 封装完整组件模板