codemirror6 使用体验

2024/1/9

Codemirror6

  • codemirror6 经过重写后, 高度模块化. 如果是第一次接触, 可能不是很容易上手. 不像 v5 一样, 只需要 cdn 引入即可, v6 自然是支持 cdn 引入的, 不然如何支持浏览器的呢, 不过需要使用构建工具手动构建, 官方并没有提供现成的 cdn.

架构

  • 在读完 codemirror6 的文档后, 可以看出作者的代码功底绝对是十分丰富且老道的. 使用 MVVM 模型. 不可变数据.
  • codemirror6 有自己的一套插件体系, 比如 Extension, Widget. 可以说是扩展性十足. 不像 Monoca, 它的核心很难被修改, codemirror 支持开发者重写自己的逻辑, 大概这就是 Obsdian, replit 改用 codemirror6 的原因吧, 并且 Codemirror6 是目前来说对跨段最友好的 editor 了. 对比一下 monoca, 不支持移动端, 没有人愿意写两套编辑器代码

补全模块

  • 自动补全是我最关心的, 像 vscode, vim, neovim, emacs, 他们的补全框架都还不错, cm6 的补全模块, 给我的印象就是, 它把基础工作全部做好了, 但是没有提供开箱即用的友好体验, 需要开发者自己去实现功能, 开发出符合自己使用场景的代码功能.

配置

一般这种情况都是通过监听配置项是否变化, 从而进行实例刷新的, 这显然是非常不现实的, cm6 支持 comparement, 或者 通过 appendconfig 的方式来动态更改配置

  • 写完这个补全的模块, 基本看遍了论坛的所有帖子, 和官网的文档, 包括 Ref Manual. 还有寥寥无几的中英文帖子

Lezer 解析引擎

v6 引入了 Lezer, 作者是借鉴了 tree-sitter 的思想. lezer 的文档和 codemirror6 的文档一样 (一个作者), 写起来也很麻烦, 全靠借鉴已有的代码.

吐槽一下

  • cm6 由于模块化的原因分成了多个包, 导致很多新手的第一印象就是好复杂, 新手看不懂, 老手不用看 (我的建议是跟着官网的例子自己做一个小 demo, 就可以入门了)
  • cm6 的官方文档虽然很全, 其实就是 Ref manual(jsdoc) 加上一些例子. 官网的导航其实很容易让人困惑, 抓不到重点. 但是熟悉后几乎也没什么可以看的了, 写代码需要查 api 的时候, 直接代码跳转即可, 官网也没有提供搜索功能, 全靠浏览器的 Ctrl-F.
  • 论坛虽然人不多, 但是多翻翻帖子, 还有可以找到一些有用的连接的.