Monaco Editor的对标优势—为什么选择Monaco为在线编辑器内核
Author：zhoulujun Date：
Monaco Editor 是一款开源的在线代码编辑器。它和大热的 VSCode 都是微软家的娃。跟微软混，省心，尽管.Net …………
如同当年LiveScript傍大款Java，即使如今Monaco Editor没有蹭 VSCode 热度， 也随之走红了。
Monaco与VSCode
微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor（下文简称monaco）就是从这个项目中成长出来的一个web编辑器，他们很大一部分的代码（monaco-editor-core）都是共用的，所以monaco和VSCode在编辑代码，交互以及UI上几乎是一摸一样的，有点不同的是，两者的平台不一样，monaco基于浏览器，而VSCode基于electron，所以功能上VSCode更加健全，并且性能比较强大。
Monaco 是一个用于浏览器中的编辑器，始于 2011 年 Erich Gamma 加入微软。后期主要使用在 Visual Studio Online, OneDrive 以及不少内部网站。最终使用 Electron 包装成为一个跨平台的编辑器，当然其实她还是在一个浏览器里。
官方demo示例：https://microsoft.github.io/monaco-editor/index.html
对标优势
monaco有一个专门的库Monarch定义语法高亮，包括language(语言定义)，token(语法标记)，state(状态机)，rules(输入规则)等语言解析的模块，其中可以通过json文件直接定义语言
集成vscode的编辑功能，使用较为简单
使用vscode的外观和交互较为友好
原生支持代码diff，typescript
Monaco与ACE、CodeMirror功能点的对比
| 功能点 | ACE | CodeMirror | Monaco |
| 代码着色/高亮 | √ | √ | √ |
| 主题 | √ (内置20+/可扩展) | √ (内置40+) | 2种，即vs/vs dark |
| 语言支持 | √ (110+/可扩展) | √ (130+) | √ (30+) |
| 代码提示/自动补全 | √ (引入tool文件+配置) | √ 引入hint相关文件+配置快捷键命令 | √ 默认开启 |
| 代码完成/循环结构 | √ | √ | √ |
| 代码段 | √ | √ | √ |
| 搜索和替换 | √ | √ | √ |
| 多光标操作 | √ | √ | √ |
| 自动缩进 | √ | √ | √ |
| 代码折行 | √ | √ | √ |
| undo/redo | √ | √ | √ |
| 快捷键 | √ | √ | √ |
| 代码检查lint | √ | √ | |
| 字符集支持 | √ | √ | |
| 行数显示 | √ | √ | √ |
| 代码对比diff | √ | √ | |
| mixed mode混合模式 | √ | ||
| keymap键盘映射 | √ vim and Emacs | √ ( Vim , Emacs , and Sublime Text ) | |
| 多视图 | √ | ||
| resize自适应 | √ | √ | |
| 扩展小部件 | √ | ||
| 文本标记扩展 | √ | ||
| 命令行扩展 | √ | ||
| 鼠标拖放扩展 | √ |
维基百科也有个对比：https://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors
| 特性 | CodeMirror | Ace | monaco |
| 功能 | 完备 | 完备 | 完备 |
| 扩展性 | 插件、主题、mode扩展 | 插件、主题、mode扩展 | mode扩展 |
| 外观/交互 | 支持多款主题和部件 基础UI较为简单 | 支持多款主题 | vscode风格 风格统一交互友好 |
| 文档/demo | 官网详细的api文档 demo单页展示 | 官网包含特性支持 mode创建教程 api文档 demo操作区 | API文档 可配置demo 功能样例+代码 |
| 支持/社区 | 独立社区 star:13k+ issue:200+ | star:16k+ issue:500+ support: Cloud9 IDE | star:7k+ issue:200+ support:Microsoft |
| 兼容性 | Firefox 3+, Chrome, Safari 3+, Internet Explorer 8+, Opera 9+ | Firefox 3.5+, Safari 4+, Chrome, IE 8+, Opera 11.5+ | IE8+, Firefox 4+, Chrome |
综合以上对比，可以对三款编辑器做出初步评价，三款功能基本完备，
CodeMirror适合支持扩展性要求高的定制型编辑器，但其多文件的引入方式带来一定的管理不方便以及浏览器端的网络性能影响。
Ace综合能力突出，适应现代的前端开发能力，基本上手简单，扩展也较为丰富，适合在浏览器端的网页中嵌入。
monaco集成度最高，引入文件量巨大，引入方式兼容性不太好，但功能实现完备，不需另外的扩展引入，适合需要实现复杂功能但不进行深度扩展的应用，因其不支持mobile且文件量大，在electron这类的客户端环境使用较为合适。
参考文章：
基于JavaScript的代码编辑器的比较和选型 https://sq.163yun.com/blog/article/184733100361850880
转载本站文章《Monaco Editor的对标优势—为什么选择Monaco为在线编辑器内核》,
请注明出处：https://www.zhoulujun.cn/html/webfront/visualization/webCodeEditor/8560.html