Monaco Editor und vscode

Präambel

Viele Leute wissen, dass der Front-End - Code-Editor Monaco Editor mit VScode zusammenhängt, aber die Details sind nicht klar, in diesem Artikel werden Sie die Beziehung und Ähnlichkeiten der beiden verstehen.

Oberflächenvergleich

Zunächst einmal sind beide Projekte von Microsoft, wobei das VScode-Projekt Github 144K star, basiert auf der CS-Architektur, eine Client-Server - Architektur. Der wichtigste Technologiestack ist
Der Wähler, TS.

Monako Editor ist 33.4k Star und ist eine BS-Architektur, Browser-Server - Architektur, mit Typescript als Haupttechnologie-Stack.

tiefe Beziehung

Die oben genannten Informationen sind für die Schülerinnen und Schüler, die beide verwendet haben, im Grunde bekannt.

Um etwas tie fer zu sagen , scha uen Sie sich bitte das Bild unten an . Diese Kar te kommt von Of fizi ell . Ad resse fürhttps://github.com/microsoft/monaco-editor/blob/main/CONTRIBUTING.md

Dieses Diagramm zeigt die Beziehung zwischen monaco-editor und vscode sehr deutlich.

Zuerst wird in diesem Git-Repository von vscode ein monaco-editor - core erstellt, das die Kernbibliothek des Editors ist, die auf der unteren Ebene ist. Dabei ist es egal, ob es sich um einen Browser oder einen Client handelt. Die Funktionen sind Position, Overwieget, Overweiget, Minmap, Range.
Der monaco-editor wurde auf dieser Bibliothek entwickelt.
Es ist erwähnenswert, dass die Monako-Dokumentation aus einer TS-Datei erstellt wurde, die aus mehreren Dateien in VScode zusammengesetzt wurde. Wenn Sie Dokumente für monaco beitragen möchten, müssen Sie PR in VScode verwenden. Ausgenommen ist der Fallcode von Monaco.

Da die Bibliothek keine Sprachmerkmale enthält, können Sie im monaco-editor viele Dateien finden, die die Sprache definieren, im Verzeichnis basic-languages. Diese Dateien definieren, wie eine bestimmte Sprache die Färbung des Wortes, wie man Methodennamen unterscheidet, wie man Variablen unterscheidet und wie man Code-Blöcke darstellt und zusammenpacken kann, die unterliegende Ebene ist die Monarch-Stattaxe verwendet,

Syntax hoch, automatisch abgeschlossen Vergleich

Sie können die Dokumentation auf der offiziellen Website von monaco und wie er die Grammatik der Sprache beschreibt finden.
https://microsoft.github.io/monaco-editor/monarch.html

Monarch: Verwenden Sie JSON, um deklarative Syntax-Highlights zu erstellen.

Die offizielle Dokumentation beschreibt, wie man mit der Monarch-Bibliothek syntaxbezogene Hervorhebung erstellt. Diese Bibliothek ermöglicht es Entwicklern, eine effiziente syntaxelle Hervorhebung mit deklarativen Syntax-Spezifikationen (als JSON-Werte geschrieben) anzugeben. Diese Spezifikation verfügt über ausreichende Ausdruckskraft, um komplexe Highlighter mit komplexen Zustandüberschreitungen, dynamischen Klammern, automatischem Vervollständigen, Einbettungen in anderen Sprachen usw. zu spezifizieren, wie im Abschnitt "Erweiterte" dieses Dokuments dargestellt. Bei der ersten Lesung können Sie sicher alle Abschnitte oder Absätze, die als (erweiterte) markiert sind, überspringen, da viele erweiterte Funktionen in den meisten Sprachdefinitionen selten verwendet werden.

Die Bibliothek definiert viele Eigenschaften, und wenn ich später die Gelegenheit habe, kann ich Ihnen einige der häufig verwendeten Eigenschaften erklären.

Hier wissen wir bereits, dass das Syntax-Highlight in Monaco monarch verwendet wird, also was in VScode? Verwenden Sie Monarch?
Nein, die Client-Software kann viel mehr Ressourcen verwenden als der Browser. Das am häufigsten verwendete LSP-Sprachprotokoll auf der Seite wird von vscode verwendet.

Die offizielle Dokumentation zu LSP kann man sehen.
https://microsoft.github.io/language-server-protocol/
LSP ist die Abkürzung für Language Server Protocol, ein allgemeines Sprachdienstprotokoll.

Das Hinzufügen von Funktionen wie Automatisches Vervollständigen, Wechsel zu Definitionen oder Überschreiten über Dokumente in einer Programmiersprache erfordert viel Aufwand. Traditionell muss diese Arbeit für jedes Entwicklungswerkzeug wiederholt werden, da jedes Werkzeug verschiedene APIs für die Implementierung der gleichen Funktionen bietet.

Sprachserver sollen sprachspezifische Intelligenz bereitstellen und mit Entwicklungswerkzeugen über Protokolle kommunizieren, die die Kommunikation zwischen Prozessen ermöglichen.

Die Idee hinter dem Language Server Protocol (LSP) besteht darin, ein Protokoll zu standardisieren, wie solche Server und Entwicklungswerkzeuge kommunizieren. Auf diese Weise kann ein einzelner Sprachserver in mehreren Entwicklungswerkzeugen wiederverwendet werden, die wiederum mehrere Sprachen mit minimalem Aufwand unterstützen können.

LSP ist ein Sieg für Sprachanbieter und Tool-Anbieter!

Die folgende Abbildung zeigt die Implementierung von Automatisches Vervollständigen mit Dokumentenkommentaren mit LSP.

Tatsächlich gibt es einige große Leute im Internet, die versuchen, das LSP-Protokoll zu integrieren, um die Benutzererfahrung von monaco zu verbessern, und mein Freund ist einer von ihnen. Der gesamte Prozess ist jedoch ziemlich mühsam und komplex. Es ist notwendig, das LSP-Protokoll für die angegebene Sprache zu finden, das als Server dient, um monaco zu bedienen. Wenn ich die Gelegenheit habe, werde ich es euch erklären.

Zusammenfassung

Auch die Produkte rund um die Umgebung sind gut. Die sogenannten Stärken haben keine Schwachen. Wir traten in ein großartiges Team und beraten einige großartige Menschen, die für unsere Lebensplanung sehr nützlich sind. Zwangssinn -