前言

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

表面对比

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

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

深层关系

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

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

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

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

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

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

语法高亮,自动完成对比

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

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

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

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

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

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

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

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

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

LSP对语言提供商和工具供应商来说都是一个胜利!

下图就是使用LSP实现的带有文档注释的自动完成。

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


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

总结

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

相关新闻

评论列表(2条)

  • Armando Hynes的头像
    Armando Hynes 2023年11月22日 下午2:51

    Today we launch our Black Friday discounts. We significantly reduced our prices on all of our applications.

    Access competitive prices on applications for your website such as: SEO, video, email marketing, saas applications, productivity, social media and more.

    Get the discounts here:

    https://bit.ly/BlackFridayHotAppsDiscounts

  • Shana Lash的头像
    Shana Lash 2023年10月27日 下午6:02

    want to get an alert when your website is down? then signup to our 24on7 web monitor – it’s absolutely free!
    visit https://t.ly/hCFIP?modbus.cn for more info

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

邮箱

cloud@modbus.cn

QQ
QQ
微信
微信
分享本页
返回顶部