Hinzufügen von jsvue-Sprachenunterstützung im monaco-Editor

Präambel

Vor kurzem habe ich bei Gitlabs Web Ide festgestellt, dass beim Schreiben einer vue-Komponente das Suffix. view für die Dateien verwendet wird. In der oberen rechten Ecke des Editors wird die aktuelle Programmiersprache angezeigt, wenn view, und die Hervorhebung der Syntax oder Tags, Formatierung, Falten sind alle ausgezeichnet. Als Frontend-Entwickler müssen wir manchmal View-Komponenten im Monaco-Editor schreiben, also habe ich meine Freizeit genutzt, um zu versuchen, Viewjs in Monaco zu integrieren. Vuejs ist keine Programmiersprache, es ist sehr ähnlich wie HTML, aber es gibt viele Unterschiede, die ich hier nicht weiterführen werde. In diesem Artikel habe ich untersucht, wie ich Viewjs in Monaco integrieren kann.

Entdecken Sie

Schauen wir uns zunächst einmal an, wie eine View-Komponente in Gitlab Webide funktioniert.
Hier sind zwei einfache Codes für die View-Komponenten, die in Webide funktionieren.

Wie Sie sehen können, können sowohl HTML-Tags, Attribute, als auch JS-Schlüsselwörter und Variablen angemessen gefärbt werden. Ich kann nicht sagen, dass es keine Mängel gibt, aber es ist schon sehr gut. (Ein Nachteil ist, dass das Script-Label nicht zusammenklappt werden kann)

Um einen solchen Effekt zu erreichen, ist es in zwei Teile unterteilt, der erste ist nicht die Registrierung einer view-Sprache für monaco und die Konfiguration der entsprechenden Eigenschaften der Sprache. Zweitens ist es wichtig, ein gutes Thema zu finden. Dieser Artikel behandelt den ersten Schritt, das Hinzufügen der Programmiersprache view zur monako-Registrierung.

Nachdem ich die Richtung der Forschung festgestellt hatte, suchte ich viele Materialien, fand aber alle Artikel und Antworten, wie man monaco in view integrieren kann.

Das Einzige, was relevant ist, ist das Problem. Hinzufügen von jsvue-Sprachenunterstützung in monaco Editor

Aufgrund mehrerer erfolgloser Suchen wurde das Problem der Hinzufügung von view-Sprachenunterstützung in monaco für eine Weile auf Eis gelegt und wollte vor kurzem wieder herausfordern. In der Tat ist dieses Forschungsthema, die wirkliche Rolle ist nicht sehr groß, und das Schreiben von View-Komponenten im Editor kann nicht direkt angezeigt werden, verwendet werden. Mit Ausnahme einiger großer Web-Ide - Plattformen, die diese Funktion benötigen, sind Einzelpersonen und kleine Unternehmen im Grunde nicht verfügbar. Es gibt auch andere Anwendungen, die ich nicht kenne, die ich nicht kenne. Aber in der Tat für mich, nicht nur benötigt, sondern nur ein interessanter Punkt, ein kleines Forschungsthema.

Eine der einfachsten Lösungen für dieses Problem ist der Webide-Code von Picgitlab. Ja, es ist im riesigen Gitlab-Quellcode zu finden, wie sie die Sprache Vue in Monaco registriert haben und welche Konfigurationsdateien sind. Einfach, aber zeitaufwändig. Die ungläubigen Schüler können nicht nach unten schauen, um nach sich zu suchen.

Da ich den Weg kannte, den ich gehen musste, um die Früchte zu ernten, machte ich mich ohne Rücksicht auf die Reise. Ich begann mit der oberflächlichen Erforschung des Gitlab Webide-bezogenen Quellcodes und sagte, dass die Forschung sich selbst prahlt, ist in der Tat ein Abschnitt. ctrl + f ctrl + shift +f 。
Eine Suche, eine Suche, eine Suche.

Praxis

Sagen Sie, es ist eine Suche, in der Tat, um die richtigen Schlüsselwörter zu suchen, die Suchschlüsselwörter bestimmen die Effizienz, die Sie suchen.
Das Schlüsselwort, das ich benutze, ist der erste Schritt, den ich benutze. registerbenutze, weil man diese Methodelanguages.register()benutzen muss, um eine Programmiersprache zu monaco hinzuzufügen. Ich habe das SchlüsselwortregisterLanguages 。Und plötzlich fand ich das, was ich wollte.

Tatsächlich ist die Suche hier auch ein Problem mit der Monaco-Version verbunden, da Gitlab verwendet Monaco früher, wenn nicht aktualisiert genug seine Version, dann sollte die Version sehr niedrig sein, in diesem Fall kann es leicht zu führen, dass die Dokumentation, die API nicht stimmt. Sie können nicht finden, was Sie suchen, oder selbst wenn Sie suchen, können Sie nicht direkt verwenden. Die von Gitlab verwendete Monaco-Version ist"monaco-editor": "^0.25.2",

Hier sind einige Dateien, die sich auf die Registrierungsprache beziehen
app/assets/javascripts/editor/source_editor.js
Registrieren Sie alle benutzerdefinierten Sprachen mit der Methode registerLanguages

app/assets/javascripts/ide/lib/languages/vue.js Dateien, die die Attribute der Programmiersprache Vue definieren, wie Highlight, Tag usw.

app/assets/javascripts/ide/lib/editor.js
Das Thema, die Registrierungsprache

app/assets/javascripts/ide/utils.js

Die Datei enthält eine registerLanguages-Methode, die die in view.js definierten Attribute verwendet.

Da ich reine HTML benutze, um monaco zu integrieren, brauche ich ein wenig modifiziert, um view.js zu verwenden.
Der vollständige Code kann am Ende des Textes angesehen werden.

entfernt den Import-Export - Wert und ersetzt den Enumerator-Wert von languages.

Nach der Änderung von vue.js kann man view in monaco integrieren, indem man drei Funktionen aufruft
Der Kerncode ist

const languageId = vueLan.id;
monaco.languages.register(vueLan);
monaco.languages.setMonarchTokensProvider(languageId, vueLan.language);
monaco.languages.setLanguageConfiguration(languageId, vueLan.conf);

Vollständiger Effekt

Vollständiger Code

<!DOCTYPE html>
<html>

<head>
  <title>Vue 组件高亮 Hello World @CSDN拿我格子衫来 Monaco Editor</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>

<body>
  <h2>Hello World CSDN@拿我格子衫来 Monaco Editor</h2>

  <h2>集成vue语言 CSDN@拿我格子衫来 Monaco Editor</h2>
  <div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>

  <script src="./monaco-editor/package/min/vs/loader.js"></script>

  <script src="./vue.js"></script>

  <script>
    require.config({ paths: { vs: './monaco-editor/package/min/vs' } });
    let editor

    require(['vs/editor/editor.main'], function () {

      const languageId = vueLan.id;
      monaco.languages.register(vueLan);
      monaco.languages.setMonarchTokensProvider(languageId, vueLan.language);
      monaco.languages.setLanguageConfiguration(languageId, vueLan.conf);

      editor = monaco.editor.create(document.getElementById('container'), {
        value: vueCom,
        language: 'vue',
      });
    });


  </script>
</body>

</html>