Indlejring af JavaScript-kode i JSON-egenskaber med Monaco Editor

Brug af Monaco Editor til at fremhæve JavaScript i JSON-egenskaber

De Monaco-redaktør er en kraftfuld kodeeditor, kendt for at være kernen bag Visual Studio Code. Det tilbyder omfattende tilpasning, herunder syntaksfremhævning, tokenisering og indlejring af forskellige sprog i filer. Der er dog tilfælde, hvor udviklere har brug for avancerede opsætninger, som f.eks. indlejring af JavaScript indeni JSON egenskaber.

En almindelig udfordring opstår, når man forsøger at vise JavaScript-kode, der ligger inde i JSON-egenskaber, som om det var en selvstændig JavaScript-blokering. Dette bliver vigtigt for projekter, hvor JSON ikke kun fungerer som datalagring, men også bærer uddrag af eksekverbar kode, såsom dem under "eval" ejendom.

I denne artikel vil jeg demonstrere de nødvendige trin for at konfigurere Monaco Editor til at genkende og korrekt vise JavaScript indlejret i JSON-felter. På trods af eksisterende tutorials og forslag kræver opnåelse af den ønskede syntaksfremhævning en mere skræddersyet tilgang, som jeg vil udforske her.

Brug af højre tokeniseringsmønstre og konfigurationer vil sikre, at Monaco Editor opfører sig efter hensigten. Den angivne eksempelkode indeholder en JSON-struktur med et "eval"-felt, der indeholder JavaScript-kode. Jeg vil guide dig gennem løsningen og fremhæve nogle faldgruber, jeg stødte på, mens jeg forsøgte at implementere denne funktion ved hjælp af Copilots forslag.

Sådan indlejres JavaScript i JSON ved hjælp af Monaco Editor

De tidligere angivne scripts viser, hvordan man konfigurerer Monaco-redaktør at genkende og korrekt vise JavaScript indlejret i JSON-egenskaber, specifikt under et "eval"-felt. Denne opsætning sikrer, at editoren kan parse det indlejrede JavaScript, som om det var en del af en selvstændig JavaScript-fil. Nøglen til at opnå dette ligger i at definere en brugerdefineret tokenizer ved hjælp af Monark syntaks, som gør det muligt for editoren at identificere JavaScript-sektionen og anvende korrekt syntaksfremhævning i JSON-strukturen.

En af de vigtigste kommandoer i eksemplet er monaco.languages.register. Denne kommando registrerer en ny sprogkonfiguration, hvilket effektivt udvider Monacos standardadfærd. Ved at bruge dette introducerer vi et brugerdefineret sprog kaldet "jsonWithJS" for at adskille vores forbedrede JSON-opsætning fra standardsproget. Vi ansætter også setMonarchTokensProvider, som giver os mulighed for at erklære tokeniseringsregler for det nyligt registrerede sprog. Dette er afgørende for at fortælle redaktøren, hvordan den indlejrede JavaScript skal håndteres i "eval"-egenskaben.

De næste Indlejret egenskaben spiller en afgørende rolle i at aktivere overgangen fra JSON til JavaScript inden for et enkelt token. Det sikrer, at indholdet i "eval"-feltet behandles som JavaScript, selvom det ligger i en JSON-fil. Denne problemfri overgang får koden i "eval"-feltet til at fremstå som JavaScript og gavner udviklere, der er afhængige af Monacos syntaksfremhævningsfunktioner for bedre læsbarhed. Derudover monaco.editor.create metode bruges til at initialisere Monaco Editor og gengive editor-forekomsten i den angivne HTML-beholder.

Enhedstesten ved hjælp af Jest validerer, at JavaScript inde i JSON-egenskaben er korrekt genkendt og fremhævet. Dette sikrer, at vores løsning er pålidelig og fungerer på tværs af forskellige miljøer. Vi implementerer også fejlhåndtering med konsol.fejl for at logge eventuelle problemer under editorens initialisering. Dette modulære design giver udviklere mulighed for nemt at genbruge koden og udvide den til andre scenarier, hvor sprogindlejring er påkrævet. Med disse konfigurationer kan udviklere nu drage fordel af en mere dynamisk og læsbar oplevelse, når de arbejder med JSON-filer, der indeholder eksekverbar JavaScript-kode.

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

Forbedring af syntaksfremhævning i JSON med indlejret JavaScript

Et aspekt, der ikke er diskuteret tidligere, er vigtigheden af ​​at optimere editorens ydeevne, når man håndterer store JSON-filer, der indeholder indlejret JavaScript. Monaco Editor kan håndtere flere sprog, men indlejring af sprog i hinanden tilføjer kompleksitet. Uden omhyggelig konfiguration kan ydeevnen blive forringet, især hvis tokenisering processen bliver ineffektiv. For at undgå dette bør udviklere sikre deres Monarch tokenizer er veldefineret og bruger optimerede regulære udtryk for at minimere behandlingstiden.

En anden kritisk overvejelse er redaktørens fleksibilitet med autofuldførelse. Udviklere ønsker måske at forbedre deres JSON-med-JavaScript-editor ved at aktivere autofuldførelse for både JSON-nøgler og JavaScript-kode. Til dette er completionItemProvider API i Monaco kan bruges til at give forslag dynamisk, efterhånden som brugeren skriver. Denne funktion kan forbedre produktiviteten markant, når du arbejder med komplekse JSON-strukturer, der indeholder evaluerende kodeblokke.

Sikkerhed er et andet væsentligt aspekt. Indlejring af JavaScript i JSON kan give anledning til bekymring kode indsprøjtning risici, især i miljøer, hvor brugergenereret indhold er tilladt. Det anbefales at validere og rense JSON-indhold, før det gengives i editoren. Derudover bør udviklere overveje sandboxing eller begrænse udførelsen af ​​indlejret JavaScript for at undgå potentielle sikkerhedssårbarheder. Kombinationen af ​​disse fremgangsmåder sikrer, at integrationen af ​​JavaScript i JSON er både smidig og sikker og opfylder udviklings- og sikkerhedsstandarder.