JavaScript-code insluiten in JSON-eigenschappen met Monaco Editor

Monaco Editor gebruiken om JavaScript in JSON-eigenschappen te markeren

De Monaco-redacteur is een krachtige code-editor, algemeen bekend als de kern achter Visual Studio Code. Het biedt uitgebreide aanpassingen, inclusief syntaxisaccentuering, tokenisatie en het insluiten van verschillende talen in bestanden. Er zijn echter gevallen waarin ontwikkelaars geavanceerde instellingen nodig hebben, zoals het insluiten van JavaScript JSON-eigenschappen.

Een veel voorkomende uitdaging doet zich voor bij het weergeven van JavaScript-code die zich in JSON-eigenschappen bevindt, alsof deze op zichzelf staat JavaScript-blok. Dit wordt essentieel voor projecten waarbij JSON niet alleen fungeert als gegevensopslag, maar ook fragmenten van uitvoerbare code bevat, zoals die onder de "evalueren" eigendom.

In dit artikel zal ik de stappen demonstreren die nodig zijn om de Monaco Editor te configureren om JavaScript ingebed in JSON-velden te herkennen en correct weer te geven. Ondanks bestaande tutorials en suggesties vereist het bereiken van de gewenste syntaxisaccentuering een meer op maat gemaakte aanpak, die ik hier zal onderzoeken.

Recht gebruiken tokenisatie patronen en configuraties zorgen ervoor dat de Monaco Editor zich gedraagt ​​zoals bedoeld. De gegeven voorbeeldcode bevat een JSON-structuur met een "eval"-veld met JavaScript-code. Ik zal u door de oplossing leiden en enkele valkuilen benadrukken die ik tegenkwam toen ik deze functie probeerde te implementeren met behulp van de suggesties van Copilot.

JavaScript in JSON insluiten met Monaco Editor

De eerder verstrekte scripts demonstreren hoe u de Monaco-redacteur om JavaScript ingebed in JSON-eigenschappen te herkennen en correct weer te geven, met name onder een "eval"-veld. Deze opstelling zorgt ervoor dat de editor het ingebedde JavaScript kan parseren alsof het deel uitmaakt van een zelfstandig JavaScript-bestand. De sleutel om dit te bereiken ligt in het definiëren van een aangepaste tokenizer met behulp van Monarch syntaxis, waarmee de editor de JavaScript-sectie kan identificeren en de juiste syntaxisaccentuering kan toepassen binnen de JSON-structuur.

Een van de belangrijkste opdrachten in het voorbeeld is monaco.talen.register. Deze opdracht registreert een nieuwe taalconfiguratie, waardoor het standaardgedrag van Monaco effectief wordt uitgebreid. Door dit te gebruiken introduceren we een aangepaste taal met de naam "jsonWithJS" om onze verbeterde JSON-installatie te onderscheiden van de standaardinstallatie. Wij hebben ook dienst setMonarchTokensProvider, waarmee we tokenisatieregels voor de nieuw geregistreerde taal kunnen declareren. Dit is van cruciaal belang om de editor te vertellen hoe hij met het ingebedde JavaScript binnen de eigenschap "eval" moet omgaan.

De volgendeIngebed eigenschap speelt een cruciale rol bij het mogelijk maken van de overgang van JSON naar JavaScript binnen één token. Het zorgt ervoor dat de inhoud in het veld "eval" wordt behandeld als JavaScript, ook al bevindt deze zich in een JSON-bestand. Deze naadloze overgang zorgt ervoor dat de code in het 'eval'-veld verschijnt als JavaScript en komt ten goede aan ontwikkelaars die voor een betere leesbaarheid vertrouwen op de syntaxisaccentueringsmogelijkheden van Monaco. Bovendien is de monaco.editor.create methode wordt gebruikt om de Monaco Editor te initialiseren en de editorinstantie binnen de opgegeven HTML-container weer te geven.

De unit-test met Jest valideert dat het JavaScript in de JSON-eigenschap correct wordt herkend en gemarkeerd. Dit zorgt ervoor dat onze oplossing betrouwbaar is en in verschillende omgevingen werkt. We implementeren ook foutafhandeling met console.fout om eventuele problemen tijdens de initialisatie van de editor vast te leggen. Dankzij dit modulaire ontwerp kunnen ontwikkelaars de code eenvoudig hergebruiken en uitbreiden voor andere scenario's waarin taalinsluiting vereist is. Met deze configuraties kunnen ontwikkelaars nu profiteren van een meer dynamische en leesbare ervaring bij het werken met JSON-bestanden die uitvoerbare JavaScript-code bevatten.

// 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*".*?"/);
});

Syntaxisaccentuering in JSON verbeteren met ingebed JavaScript

Eén aspect dat niet eerder is besproken, is het belang van het optimaliseren van de prestaties van de editor bij het werken met grote JSON-bestanden die ingebed JavaScript bevatten. De Monaco Editor kan meerdere talen verwerken, maar het inbedden van talen in elkaar zorgt voor extra complexiteit. Zonder zorgvuldige configuratie kunnen de prestaties afnemen, vooral als de tokenisatie proces wordt inefficiënt. Om dit te voorkomen, moeten ontwikkelaars ervoor zorgen dat hun Monarch-tokenizer is goed gedefinieerd en maakt gebruik van geoptimaliseerde reguliere expressies om de verwerkingstijd te minimaliseren.

Een andere kritische overweging is de flexibiliteit van de editor met automatisch aanvullen. Ontwikkelaars willen wellicht hun JSON-met-JavaScript-editor verbeteren door automatische aanvulling in te schakelen voor zowel JSON-sleutels als JavaScript-code. Hiervoor is de voltooiingItemProvider API in Monaco kan worden gebruikt om dynamisch suggesties te geven terwijl de gebruiker typt. Deze functie kan de productiviteit aanzienlijk verbeteren bij het werken met complexe JSON-structuren die evaluatieve codeblokken bevatten.

Veiligheid is een ander essentieel aspect. Het insluiten van JavaScript in JSON kan aanleiding geven tot zorgen code injectie risico's, vooral in omgevingen waar door gebruikers gegenereerde inhoud is toegestaan. Het wordt aanbevolen om JSON-inhoud te valideren en op te schonen voordat deze in de editor wordt weergegeven. Bovendien moeten ontwikkelaars sandboxing overwegen of de uitvoering van ingebedde JavaScript beperken om potentiële beveiligingsproblemen te voorkomen. Het combineren van deze praktijken zorgt ervoor dat de integratie van JavaScript in JSON zowel soepel als veilig verloopt en voldoet aan de ontwikkelings- en veiligheidsnormen.