monaco editor 与 vscode 两个项目的联系与异同点

前言

很多人知道前端代码Editmonaco editor 与vscode 有关系，但却不清楚其中的细节，本篇文章就带大家了解一下两者的关系和异同点。

表面对比

首先，这两个项目都是来自微软，其中vscode 项目Github 144K star，是基于CS架构，客户端-服务端架构。主要的技术栈是
elector，ts。

而monaco editor则是33.4k star,是一个bs架构，浏览器-服务端架构，主要的技术栈是typescript。

深层关系

以上信息对于使用过二者的同学基本都知道。

那么说点比较深入的，请看下面这张图。这张图来自官方。address为 https://github.com/microsoft/monaco-editor/blob/main/CONTRIBUTING.md

这张图很清楚地描述了monaco-editor 与vscode两个库的关系。

首先在vscode这个git仓库中，会构建出一个monaco-editor-core，这是Edit器的核心库，该库是比较底层的。不关心上层是浏览器还是客户端。它说实现的Function就是，我们Edit中常使用的position，overwieget，overweiget，minmap，range，
monaco-editor 就是基于这个库来开发出来的。
值得一提的是，monaco的Document是由一个ts文件生成的，而该文件是在vscode中有多个文件拼接而成。所有如果你要想给monaco贡献Document，那么你需要在vscode中提PR。monaco的案例代码除外。

由于该库没有包含语言特性，所以你能够在monaco-editor中找到很多定义语言高亮的文件，就在basic-languages目录中。这些文件中定义了某一种语言的需要着色的分词，如何区分方法名，如何区分变量，以及如何表示代码块，并能够折叠，这一套底层是使用的monarch语法，

语法高亮，自动Complete对比

你可以在monaco官网上找到它的Document，以及他是如何描述语言的语法的。
https://microsoft.github.io/monaco-editor/monarch.html

Monarch：使用JSON创建声明性语法高亮。

官方Document描述了How to useMonarch库创建语法高亮显示。这个库允许developer使用声明性词法规范（编写为JSON值）指定高效的语法高亮显示。该规范具有足够的表达能力，可以指定具有复杂状态转换、动态大括号匹配、自动Complete、其他语言嵌入等Function的复杂荧光笔，如本Document的“高级”主题部分所示。第一次阅读时，可以安全地跳过标记为（高级）的任何部分或段落，因为大多数语言定义中很少使用许多高级Function。

该库定义的属性有很多，如果后面有机会，我可以给大家讲解一些常用的属性。

到这里我们已经知道了，monaco中的语法高亮是使用monarch，那么vscode中那？也是使用monarch吗？
并不是的，客户端软件可以使用的资源要比浏览器端多的多。vscode使用的页面上最流行的LSP语言协议。

有关LSP可以View官方Document
https://microsoft.github.io/language-server-protocol/
LSP 就是Language Server Protocol的缩写，一种通用的语言服务协议。

为编程语言添加自动Complete、转到定义或悬停Document等Function需要花费大量精力。传统上，这项工作必须对每个开发Tools重复进行，因为每个Tools都为实现相同的Function提供了不同的API。

语言服务器旨在提供特定于语言的智能，并通过实现进程间通信的协议与开发Tools进行通信。

语言服务器协议（LSP）背后的想法是标准化此类服务器和开发Tools如何通信的协议。这样，单个语言服务器可以在多个开发Tools中重复使用，而这些Tools又可以以最小的努力支持多种语言。

LSP对语言提供商和Tools供应商来说都是一个胜利！

下图就是使用LSP实现的带有Document注释的自动Complete。

其实网上也有一些大佬为了提升monaco的用户体验，也尝试集成LSP协议，我的朋友就是其中一名。但整个过程是比较繁琐，复杂的。需要找到指定语言的LSP协议，当作服务端，为monaco提供服务。后面有机会我会给大家讲解一下。

总结

优秀的产品 周边也都优秀。正所谓强将手下无弱兵。我们进入一个优秀的团队，接触一些优秀的人，对我们的人生规划 大有裨益。 强行胡扯-_-