Bädda in JavaScript-kod i JSON-egenskaper med Monaco Editor

Använda Monaco Editor för att markera JavaScript i JSON-egenskaper

De Monaco Redaktör är en kraftfull kodredigerare, allmänt känd för att vara kärnan bakom Visual Studio Code. Den erbjuder omfattande anpassning, inklusive syntaxmarkering, tokenisering och inbäddning av olika språk i filer. Det finns dock fall där utvecklare behöver avancerade inställningar, som att bädda in JavaScript inom JSON-egenskaper.

En vanlig utmaning uppstår när man försöker visa JavaScript-kod som finns i JSON-egenskaper som om den vore en fristående JavaScript-block. Detta blir väsentligt för projekt där JSON fungerar inte bara som datalagring utan också bär utdrag av exekverbar kod, som de under "eval" egendom.

I den här artikeln kommer jag att demonstrera de steg som krävs för att konfigurera Monaco Editor för att känna igen och korrekt visa JavaScript inbäddat i JSON-fält. Trots befintliga handledningar och förslag kräver att uppnå önskad syntaxmarkering ett mer skräddarsytt tillvägagångssätt, vilket jag kommer att utforska här.

Använder höger tokeniseringsmönster och konfigurationer kommer att säkerställa att Monaco Editor beter sig som avsett. Exempelkoden som tillhandahålls innehåller en JSON-struktur med ett "eval"-fält som innehåller JavaScript-kod. Jag kommer att guida dig genom lösningen och lyfta fram några fallgropar som jag stötte på när jag försökte implementera den här funktionen med hjälp av Copilots förslag.

Hur man bäddar in JavaScript i JSON med Monaco Editor

Skripten som tillhandahållits tidigare visar hur man konfigurerar Monaco Redaktör för att känna igen och korrekt visa JavaScript inbäddat i JSON-egenskaper, specifikt under ett "eval"-fält. Denna inställning säkerställer att redigeraren kan analysera det inbäddade JavaScriptet som om det vore en del av en fristående JavaScript-fil. Nyckeln till att uppnå detta ligger i att definiera en anpassad tokenizer med hjälp av Monark syntax, vilket gör att redigeraren kan identifiera JavaScript-sektionen och tillämpa korrekt syntaxmarkering inom JSON-strukturen.

Ett av de viktigaste kommandona i exemplet är monaco.languages.register. Detta kommando registrerar en ny språkkonfiguration, vilket effektivt utökar Monacos standardbeteende. Genom att använda detta introducerar vi ett anpassat språk som heter "jsonWithJS" för att skilja vår förbättrade JSON-inställning från standarden. Vi anställer också setMonarchTokensProvider, vilket tillåter oss att deklarera tokeniseringsregler för det nyregistrerade språket. Detta är avgörande för att berätta för redaktören hur den inbäddade JavaScript-koden ska hanteras i egenskapen "eval".

De nästaInbäddad egenskapen spelar en avgörande roll för att möjliggöra övergången från JSON till JavaScript inom en enda token. Det säkerställer att innehållet i "eval"-fältet behandlas som JavaScript, även om det finns i en JSON-fil. Denna sömlösa övergång gör att koden i "eval"-fältet visas som JavaScript och gynnar utvecklare som förlitar sig på Monacos syntaxmarkeringsfunktioner för bättre läsbarhet. Dessutom monaco.editor.create metod används för att initiera Monaco Editor och rendera editor-instansen inom den angivna HTML-behållaren.

Enhetstestet med Jest validerar att JavaScriptet i JSON-egenskapen känns igen och markeras korrekt. Detta säkerställer att vår lösning är pålitlig och fungerar i olika miljöer. Vi implementerar även felhantering med console.error för att logga eventuella problem under redaktörens initiering. Denna modulära design tillåter utvecklare att enkelt återanvända koden och utöka den för andra scenarier där språkinbäddning krävs. Med dessa konfigurationer kan utvecklare nu dra nytta av en mer dynamisk och läsbar upplevelse när de arbetar med JSON-filer som innehåller körbar JavaScript-kod.

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

Förbättra syntaxmarkering i JSON med inbäddad JavaScript

En aspekt som inte diskuterats tidigare är vikten av att optimera editorns prestanda när man hanterar stora JSON-filer som innehåller inbäddat JavaScript. Monaco Editor kan hantera flera språk, men inbäddning av språk i varandra ökar komplexiteten. Utan noggrann konfiguration kan prestandan försämras, särskilt om tokenisering processen blir ineffektiv. För att undvika detta bör utvecklare se till att deras Monark tokenizer är väldefinierat och använder optimerade reguljära uttryck för att minimera bearbetningstiden.

En annan viktig faktor är redaktörens flexibilitet med automatisk komplettering. Utvecklare kanske vill förbättra sin JSON-med-JavaScript-redigerare genom att aktivera autokomplettering för både JSON-nycklar och JavaScript-kod. För detta completionItemProvider API i Monaco kan användas för att ge förslag dynamiskt när användaren skriver. Denna funktion kan avsevärt förbättra produktiviteten när man arbetar med komplexa JSON-strukturer som innehåller utvärderande kodblock.

Säkerhet är en annan viktig aspekt. Att bädda in JavaScript i JSON kan ge upphov till oro kodinjektion risker, särskilt i miljöer där användargenererat innehåll är tillåtet. Det rekommenderas att validera och sanera JSON-innehåll innan du renderar det i redigeraren. Dessutom bör utvecklare överväga sandboxning eller begränsa exekveringen av inbäddad JavaScript för att undvika potentiella säkerhetsbrister. Genom att kombinera dessa metoder säkerställs att integreringen av JavaScript i JSON är både smidig och säker och uppfyller utvecklings- och säkerhetsstandarder.