Präambel
In einem früheren Artikel haben wir beschrieben, wie man eine Methode in monaco kommentieren kann, um die Dokumentation einer Variablen, Konstanten oder Methoden über codelen oder Marker anzuzeigen. Diese Methode eignet sich jedoch nicht sehr gut für große Bibliotheken, z. B. für eine JS-Bibliothek mit hunderten Methoden, und es ist für einen faulen Programmierer unmöglich, jede Methode zu monaco hinzuzufügen. Dieser Artikel beschreibt eine Datei mit Typdeklarationen, die die Editor-Erfahrung verbessern kann. Sie können nicht nur eine detaillierte Dokumentation einer Methode anzeigen, sondern auch die automatische Vervollständigung der Methode.
Kernmethode hat nur eineaddExtraLib()
addExtraLib
Da monaco nicht wie vcode mit LSP (Language Service Protocol) zugänglich ist, muss alles automatisch in Massen implementiert werden, ist die Methode Kommentare lästig, aber monaco hat die Methode addExtraLib hinzugefügt, die eine Zeichenfolge mit einem Typ deklariert übergeben kann.
declare class Facts {
/**
* Returns the next fact
*/
static next(): string
}Dieser Text wird mit addExtraLib demmonaoc-Sprachdienst hinzugefügt, so dass er automatisch geschrieben wird, wenn der BenutzerFacts.next()schreibt, und die Kommentare zu dieser Methode in der next-Methode angezeigt werden. Wenn Sie ein Sprachmodell mit dem Inhalt der ts-Typen - Deklaration erstellt haben, können Sie die spezifischen Deklarationen auf dieser Methode wie in der folgenden Abbildung ansehen:
Wenn Sie ein Sprachmodell mit dem Inhalt der ts-Typen - Deklaration erstellt haben, können Sie die spezifischen Deklarationen in dieser Methode wie folgt anzeigen:
Dieses Szenario hat viele Vorteile, insbesondere für Programmierer, die nicht mit einer Methode vertraut sind. Sie können die Maus direkt über den Methodennamen bewegen und das Dokument anzeigen. Sehr freundlich, bequem.
Wenn Sie die JS-Bibliotheken wielodash oder jquery verwenden, vergessen Sie manchmal den vollständigen Namen einer Methode oder können Sie sich nicht an die Reihenfolge der Parameter einer Methode erinnern. Dafür benötigt man eine Methodendokumentation.
Ich werde die beiden Bibliotheken von Lodash und jQuery als Beispiel verwenden, um sie zu monako hinzuzufügen.
Integration der loadash-Bibliothek in den monako-Editor
Z un ächst erhalten wir die ts - D ek laration von Lod ash . Nach einer einfa chen Su che habe ich dieses Git - L ager gefunden , https ://github.com/DefinitelyTyped/DefinitelyTyped
In diesem Repository sind viele der ts-Statements unserer häufig verwendeten Bibliotheken gespeichert.
Wir kennen die TS-Erklärung von Lodash. Hier kann erworben werden.
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/lodash/v3/index.d.ts
Achten Sie auf einige Bücher.index.d.ts Es ist nur eine Hülle, die Substanz ist in den einzelnen Unterdateien verteilt.
Wir speichern die oben verlinkten Inhaltelodash.d.tsDatei
Dann verwenden wir fetch in html, um den Inhalt dieser Datei zu erhalten, der Kerncode wie folgt
const monacoTypesUrl = './lodash.d.ts'
const libSource = await (await fetch(monacoTypesUrl)).text();
console.log(libSource)
var libUri = "ts:filename/lodash.d.ts";
monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri);
// When resolving definitions and references, the editor will try to use created models.
// Creating a model for the library allows "peek definition/references" commands to work with the library.
monaco.editor.createModel(libSource, "typescript", monaco.Uri.parse(libUri));integriert ist, um die Leistung im Editor zu sehen, wenn wir den Namespacelodashausführen_von
Dann rufen wir seine cloneDeep-Methode auf, wie in der folgenden Abbildung:
Ist das nicht sehr gut?
Schauen wir uns die Integration der jQuery-Bibliothek an.
Integration der jquery-Bibliothek in den monako-Editor
Folgen Sie den oben genannten Schritten und erhalten wir zuerst die TS-Datei für jqueyr.
Über den folgenden Link können Sie die ts-Deklaration für jQuery v2 - Versionen erhalten.
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jquery/v2/index.d.ts
Kopieren Sie den Inhalt der Dateien und legen Sie sie in die lokale Datei jquery.d.ts ein.
Änderungen monacoTypesUrl Die Variablen sind './jquery.d.ts'
Wir werden uns die automatische Vervollständigung des jquery ajax-Aufrufs ansehen.
Überprüfen Sie die Ajax-Methodenreferenz
Das ist eine hervorragende Erfahrung, zusätzliche Bibliotheken in monaco zu integrieren. Das kann die Benutzererfahrung des Editors erheblich verbessern.
Darüber hinaus können Sie mehrere TS-Deklarationsbibliotheken gleichzeitig injizieren oder Ihre eigene TS-Deklarationsbibliothek schreiben, um die automatische Aufforderung zu erledigen und automatisch abzuschließen.
Zusammenfassung
Der Editor ist ein sehr komplexes Software-Produkt, und jede Funktion, die die Benutzererfahrung verbessern kann, muss berücksichtigt werden.
Die Entwicklungserfahrung entscheidet direkt über den Erfolg des Produkts.
Antwort veröffentlichen