Monaco EditorとVSCodeの2つのプロジェクトの関連性と相違点

前の記事

多くの人がフロントエンドコードエディタとvscodeの関係を知っていますが、その詳細を知らない、この記事では、2つの関係と類似点を理解します。

表面の比較

まず、両方のプロジェクトはマイクロソフトから来ており、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ライブラリの関係を明確に示しています。

まず、Gitリポジトリであるvscodeでは、エディタのコアライブラリであるmonaco-editor-coreがビルドされます。これは比較的低レベルです。上位層がブラウザかクライアントかに関係ありません。これは、編集でよく使用する位置、オーバーウィジェット、オーバーウィジェット、ミニマップ、範囲を実装しています。
Monaco-Editorはこのライブラリに基づいています。
モナコのドキュメントは、vscode内の複数のファイルをつなぎ合わせた1つのTSファイルから生成されていることに言及する価値があります。monacoにドキュメントを提供したい場合は、vscodeでPRを行う必要があります。monacoのケースコードを除く。

このライブラリには言語機能が含まれていないため、monaco-editorのbasic-languagesディレクトリに言語ハイライトを定義する多くのファイルがあります。これらのファイルでは、言語の色分けが必要なトークン化、メソッド名の区別方法、変数の区別方法、コードブロックの表現方法、折りたたみ方法が定義されています。

構文ハイライト、自動補完比較

モナコの公式サイトでは、言語の構文をどのように記述しているかについてのドキュメントを見つけることができます。
https://microsoft.github.io/monaco-editor/monarch.html

Monarch：JSONを使用して宣言構文ハイライトを作成します。

公式ドキュメントでは、Monarchライブラリを使用して構文ハイライトを作成する方法を説明します。このライブラリにより、開発者は宣言型レキシカル仕様（JSON値として記述）を使用して効率的な構文ハイライトを指定できます。この仕様は、このドキュメントの“高度”トピックセクションに示されているように、複雑な状態遷移、動的中括弧マッチング、自動補完、その他の言語埋め込みなどの機能を備えた複雑な蛍光ペンを指定するのに十分な表現力を備えています。ほとんどの言語定義では、高度な機能の多くはめったに使用されないため、最初に読むときは、（高度）とマークされたセクションや段落をスキップしてもセキュリティです。

ライブラリには多くのプロパティが定義されていますが、後で機会があれば、一般的に使用されるプロパティをいくつか紹介します。

モナコの構文ハイライトはモナークを使用することはすでに知っていますが、vscodeではどうでしょうか？モナークを使うのか？
いいえ、クライアントソフトウェアはブラウザよりも多くのリソースを使用できます。vscodeはページ上で最も一般的なLSP言語プロトコルを使用します。

LSPの公式ドキュメントをご覧ください。
https://microsoft.github.io/language-server-protocol/
LSPはLanguage Server Protocolの略であり、共通言語サービスプロトコルである。

プログラミング言語にオートコンプリート、定義への移動、ドキュメントのホバーなどの機能を追加するには、多大な労力が必要です。従来は、同じ機能を実装するために異なるAPIを提供する開発ツールごとにこの作業を繰り返す必要がありました。

言語サーバは、言語固有のインテリジェンスを提供し、プロセス間通信を可能にするプロトコルを介して開発ツールと通信するように設計されています。

言語サーバプロトコルLSPの背後にあるアイデアは、そのようなサーバと開発ツールがどのように通信するかのプロトコルを標準化することです。これにより、単一の言語サーバを複数の開発ツールで再利用でき、最小限の労力で複数の言語をサポートできます。

LSPは言語プロバイダとツールプロバイダの両方にとって勝利です。

以下の図は、LSPを使用したドキュメント注釈付き自動補完です。

実際、モナコのユーザーエクスペリエンスを向上させるために、LSPプロトコルを統合しようとするオンラインの大物もいます。私の友人もその一人です。しかし、プロセス全体がより複雑で複雑です。モナコにサービスを提供するサーバーとして機能する言語固有のLSPプロトコルを見つける必要があります。後で皆さんに説明する機会があります

概要まとめ

周辺の良い製品も素晴らしいです。正强将配下无弱兵。素晴らしいチームに入り、素晴らしい人々と出会うことは、私たちの人生の計画に大いに役立ちます。強制的なナンセンス-