Code Mirror
简单来说，**CodeMirror 6** 是目前 Web 端最先进、最强大的**开源代码编辑器引擎**之一。如果你在网页上看到过可以写代码、自带高亮和自动补全的输入框（比如各种在线 IDE、API 测试工具、Markdown 编辑器），很多时候背后运行的就是它。与其说它是一个“开箱即用”的完整编辑器，不如说它是一套用来**搭建代码编辑器的积木组合**。
#status / growing
#type / resource
#tech / dev / frontend
#resource / javascript
#package / codemirror
CodeMirror-packages
它的核心特点
- 彻底的模块化： 正如你之前问到的
@codemirror/view，它把编辑器拆成了无数个小包（状态管理、视图渲染、语法解析、快捷键等）。你可以按需引入需要的功能，这就意味着你可以把它做得很轻量，不会像其他重型编辑器那样拖慢网页速度。 - 极其强悍的性能： 它原生内置了“虚拟滚动”技术。无论你的文件有多大（哪怕几十万行代码），它都只计算和渲染你当前在屏幕上看到的那一小块区域，所以滑动和打字始终如丝般顺滑。
- 出色的移动端与触屏体验： 这是它相比于很多其他老牌编辑器的一个巨大飞跃。在手机或平板的浏览器上，它的文本选择、滚动和输入体验非常接近原生输入框。
- 先进的语法解析（Lezer）： 它没有采用传统的正则表达式来做代码高亮，而是专门开发了一套名为 Lezer 的增量解析器。即使你在写代码时语法出现错误，它依然能准确地高亮其余部分的代码。
为什么会有 “6” 这个大版本？
CodeMirror 的前一个版本（CodeMirror 5）在前端界流行了十多年，但随着现代 Web 技术的发展，旧的 DOM 操作模式在性能、移动端适配和无障碍访问（Accessibility）上遇到了瓶颈。因此，作者 Marijn Haverbeke 决定完全推翻重写，耗时数年打造出了基于现代 Web 标准和函数式响应理念的 CodeMirror 6。
它和 Monaco Editor (VS Code 引擎) 有什么区别？
这是大家最常问的问题：
- Monaco Editor： 就像是一辆重型卡车，功能极其丰富（直接搬运了 VS Code 的核心），但也非常庞大，且官方不支持移动端（手机上无法正常使用）。
- CodeMirror 6： 就像是一辆乐高拼成的跑车，极度轻量、灵活、高度可定制，并且在移动端表现优异。
你想看看如何在普通的网页里用几行代码跑起一个完整的 CodeMirror 6 实例吗？