Einbetten von JavaScript-Code in JSON-Eigenschaften mit Monaco Editor

Verwenden des Monaco-Editors zum Hervorheben von JavaScript in JSON-Eigenschaften

Der Monaco-Herausgeber ist ein leistungsstarker Code-Editor, der weithin als Kernstück von Visual Studio Code bekannt ist. Es bietet umfassende Anpassungsmöglichkeiten, einschließlich Syntaxhervorhebung, Tokenisierung und Einbettung verschiedener Sprachen in Dateien. Es gibt jedoch Fälle, in denen Entwickler erweiterte Setups benötigen, beispielsweise die Einbettung von JavaScript JSON-Eigenschaften.

Eine häufige Herausforderung entsteht, wenn versucht wird, JavaScript-Code, der sich in JSON-Eigenschaften befindet, so anzuzeigen, als wäre er eigenständig JavaScript-Block. Dies ist für Projekte von entscheidender Bedeutung, bei denen JSON nicht nur als Datenspeicher dient, sondern auch Snippets ausführbaren Codes enthält, wie beispielsweise die unter „evaluieren“ Eigentum.

In diesem Artikel werde ich die Schritte demonstrieren, die erforderlich sind, um den Monaco-Editor so zu konfigurieren, dass in JSON-Feldern eingebettetes JavaScript erkannt und korrekt angezeigt wird. Trotz vorhandener Tutorials und Vorschläge erfordert das Erreichen der gewünschten Syntaxhervorhebung einen individuelleren Ansatz, den ich hier untersuchen werde.

Das Recht nutzen Tokenisierungsmuster und Konfigurationen stellen sicher, dass sich der Monaco Editor wie vorgesehen verhält. Der bereitgestellte Beispielcode enthält eine JSON-Struktur mit einem „eval“-Feld, das JavaScript-Code enthält. Ich werde Sie durch die Lösung führen und einige Fallstricke hervorheben, auf die ich gestoßen bin, als ich versuchte, diese Funktion mithilfe der Vorschläge von Copilot zu implementieren.

So betten Sie JavaScript mit dem Monaco Editor in JSON ein

Die zuvor bereitgestellten Skripte veranschaulichen die Konfiguration Monaco-Herausgeber um in JSON-Eigenschaften eingebettetes JavaScript zu erkennen und korrekt anzuzeigen, insbesondere unter einem „eval“-Feld. Durch diese Einrichtung wird sichergestellt, dass der Editor das eingebettete JavaScript so analysieren kann, als wäre es Teil einer eigenständigen JavaScript-Datei. Der Schlüssel dazu liegt in der Definition eines benutzerdefinierten Tokenizers mit Monarch Syntax, die es dem Editor ermöglicht, den JavaScript-Abschnitt zu identifizieren und die richtige Syntaxhervorhebung innerhalb der JSON-Struktur anzuwenden.

Einer der wichtigsten Befehle im Beispiel ist monaco.linguals.register. Dieser Befehl registriert eine neue Sprachkonfiguration und erweitert effektiv das Standardverhalten von Monaco. Auf diese Weise führen wir eine benutzerdefinierte Sprache namens „jsonWithJS“ ein, um unser erweitertes JSON-Setup vom Standard zu unterscheiden. Wir beschäftigen auch setMonarchTokensProvider, wodurch wir Tokenisierungsregeln für die neu registrierte Sprache deklarieren können. Dies ist entscheidend, um dem Editor mitzuteilen, wie er mit dem eingebetteten JavaScript in der Eigenschaft „eval“ umgehen soll.

Der nextEmbedded Die Eigenschaft spielt eine entscheidende Rolle bei der Ermöglichung des Übergangs von JSON zu JavaScript innerhalb eines einzelnen Tokens. Dadurch wird sichergestellt, dass der Inhalt im Feld „eval“ als JavaScript behandelt wird, auch wenn er sich in einer JSON-Datei befindet. Dieser nahtlose Übergang lässt den Code im „eval“-Feld als JavaScript erscheinen und kommt Entwicklern zugute, die sich für eine bessere Lesbarkeit auf die Syntaxhervorhebungsfunktionen von Monaco verlassen. Darüber hinaus ist die monaco.editor.create Die Methode wird verwendet, um den Monaco-Editor zu initialisieren und die Editor-Instanz innerhalb des angegebenen HTML-Containers zu rendern.

Der Komponententest mit Jest überprüft, ob das JavaScript in der JSON-Eigenschaft richtig erkannt und hervorgehoben wird. Dadurch wird sichergestellt, dass unsere Lösung zuverlässig ist und in verschiedenen Umgebungen funktioniert. Wir implementieren auch die Fehlerbehandlung mit console.error um alle Probleme während der Initialisierung des Editors zu protokollieren. Dieses modulare Design ermöglicht es Entwicklern, den Code einfach wiederzuverwenden und für andere Szenarien zu erweitern, in denen eine Spracheinbettung erforderlich ist. Mit diesen Konfigurationen können Entwickler nun von einer dynamischeren und lesbareren Erfahrung bei der Arbeit mit JSON-Dateien profitieren, die ausführbaren JavaScript-Code enthalten.

// Frontend Script: Monaco Editor configuration to embed JavaScript within JSON
// This solution initializes Monaco with a custom language definition.
require(['vs/editor/editor.main'], function () {
    monaco.languages.register({ id: 'jsonWithJS' });
    monaco.languages.setMonarchTokensProvider('jsonWithJS', {
        tokenizer: {
            root: [
                [/"eval"\s*:\s*"(.*)"/, { token: 'source.js', nextEmbedded: 'javascript' }],
                [/[{}[\],]/, 'delimiter'],
                [/\b\d+\b/, 'number'],
                [/"/, { token: 'string', bracket: '@open', next: '@string' }],
            ],
        }
    });
    monaco.editor.create(document.getElementById('container'), {
        value: '{"eval":"Item.val = Attr.val"}',
        language: 'jsonWithJS'
    });
});

// Frontend: Modular Monaco configuration with error handling
function setupMonacoEditor() {
    require(['vs/editor/editor.main'], function () {
        try {
            monaco.languages.register({ id: 'jsonWithEmbeddedJS' });
            monaco.languages.setMonarchTokensProvider('jsonWithEmbeddedJS', {
                tokenizer: {
                    root: [[/"eval"\s*:\s*"(.*?)"/, { token: 'source.js', nextEmbedded: 'javascript' }]]
                }
            });
            const editor = monaco.editor.create(document.getElementById('editor'), {
                value: '{"eval":"console.log(Attr.val);"}',
                language: 'jsonWithEmbeddedJS'
            });
        } catch (error) {
            console.error('Failed to initialize Monaco:', error);
        }
    });
}
setupMonacoEditor();

// Unit Test: Jest test for Monaco Editor's JSON with embedded JavaScript
test('Monaco Editor recognizes JavaScript in eval property', () => {
    const mockEditor = {
        getModel: () => ({ getValue: () => '{"eval":"console.log(Item.val);"}' })
    };
    const value = mockEditor.getModel().getValue();
    expect(value).toContain('console.log(Item.val);');
    expect(value).toMatch(/"eval":\s*".*?"/);
});

Verbesserung der Syntaxhervorhebung in JSON mit eingebettetem JavaScript

Ein Aspekt, der bisher nicht besprochen wurde, ist die Bedeutung der Optimierung der Editorleistung beim Umgang mit großen JSON-Dateien, die eingebettetes JavaScript enthalten. Der Monaco-Editor kann mit mehreren Sprachen umgehen, aber die Einbettung der Sprachen ineinander erhöht die Komplexität. Ohne sorgfältige Konfiguration kann es zu Leistungseinbußen kommen, insbesondere wenn Tokenisierung Der Prozess wird ineffizient. Um dies zu vermeiden, sollten Entwickler dafür sorgen Monarch-Tokenizer ist wohldefiniert und verwendet optimierte reguläre Ausdrücke, um die Verarbeitungszeit zu minimieren.

Ein weiterer wichtiger Aspekt ist die Flexibilität des Editors bei der automatischen Vervollständigung. Entwickler möchten möglicherweise ihren JSON-mit-JavaScript-Editor erweitern, indem sie die automatische Vervollständigung sowohl für JSON-Schlüssel als auch für JavaScript-Code aktivieren. Dafür ist die VervollständigungItemProvider Die API in Monaco kann verwendet werden, um Vorschläge dynamisch bereitzustellen, während der Benutzer tippt. Diese Funktion kann die Produktivität bei der Arbeit mit komplexen JSON-Strukturen, die auswertende Codeblöcke enthalten, erheblich verbessern.

Sicherheit ist ein weiterer wesentlicher Aspekt. Das Einbetten von JavaScript in JSON könnte Bedenken aufwerfen Code-Injektion Risiken, insbesondere in Umgebungen, in denen benutzergenerierte Inhalte erlaubt sind. Es wird empfohlen, JSON-Inhalte zu validieren und zu bereinigen, bevor sie im Editor gerendert werden. Darüber hinaus sollten Entwickler über Sandboxing oder die Einschränkung der Ausführung von eingebettetem JavaScript nachdenken, um potenzielle Sicherheitslücken zu vermeiden. Durch die Kombination dieser Vorgehensweisen wird sichergestellt, dass die Integration von JavaScript in JSON sowohl reibungslos als auch sicher verläuft und Entwicklungs- und Sicherheitsstandards erfüllt.