Bygge inn JavaScript-kode i JSON-egenskaper med Monaco Editor

Bruke Monaco Editor for å fremheve JavaScript i JSON-egenskaper

De Monaco-redaktør er en kraftig koderedigerer, viden kjent for å være kjernen bak Visual Studio Code. Den tilbyr omfattende tilpasning, inkludert syntaksutheving, tokenisering og innebygging av forskjellige språk i filer. Imidlertid er det tilfeller der utviklere trenger avanserte oppsett, som å bygge inn JavaScript i JSON-egenskaper.

En vanlig utfordring oppstår når du prøver å vise JavaScript-kode som ligger i JSON-egenskaper som om den var en frittstående JavaScript-blokkering. Dette blir essensielt for prosjekter der JSON ikke bare fungerer som datalagring, men også bærer utdrag av kjørbar kode, for eksempel under "eval" eiendom.

I denne artikkelen vil jeg demonstrere trinnene som kreves for å konfigurere Monaco Editor til å gjenkjenne og korrekt vise JavaScript innebygd i JSON-felt. Til tross for eksisterende veiledninger og forslag, krever det en mer skreddersydd tilnærming for å oppnå ønsket syntaksutheving, som jeg vil utforske her.

Bruker høyre tokeniseringsmønstre og konfigurasjoner vil sikre at Monaco Editor oppfører seg som tiltenkt. Eksempelkoden som er oppgitt inneholder en JSON-struktur med et "eval"-felt som inneholder JavaScript-kode. Jeg vil veilede deg gjennom løsningen og fremheve noen fallgruver jeg møtte mens jeg prøvde å implementere denne funksjonen ved å bruke Copilots forslag.

Slik bygger du inn JavaScript i JSON ved hjelp av Monaco Editor

Skriptene som ble gitt tidligere demonstrerer hvordan du konfigurerer Monaco-redaktør for å gjenkjenne og korrekt vise JavaScript innebygd i JSON-egenskaper, spesielt under et "eval"-felt. Dette oppsettet sikrer at redaktøren kan analysere det innebygde JavaScript som om det var en del av en frittstående JavaScript-fil. Nøkkelen til å oppnå dette ligger i å definere en tilpasset tokenizer ved hjelp av Monark syntaks, som lar redaktøren identifisere JavaScript-delen og bruke riktig syntaksutheving i JSON-strukturen.

En av de viktigste kommandoene i eksemplet er monaco.languages.register. Denne kommandoen registrerer en ny språkkonfigurasjon, som effektivt utvider Monacos standardoppførsel. Ved å bruke dette introduserer vi et tilpasset språk kalt "jsonWithJS" for å skille vårt forbedrede JSON-oppsett fra standard. Vi ansetter også setMonarchTokensProvider, som lar oss deklarere tokeniseringsregler for det nylig registrerte språket. Dette er avgjørende for å fortelle redaktøren hvordan den skal håndtere innebygd JavaScript i "eval"-egenskapen.

De neste Innebygd egenskapen spiller en kritisk rolle for å aktivere overgangen fra JSON til JavaScript innenfor et enkelt token. Det sikrer at innholdet i "eval"-feltet behandles som JavaScript, selv om det ligger i en JSON-fil. Denne sømløse overgangen får koden i «eval»-feltet til å vises som JavaScript og er til fordel for utviklere som er avhengige av Monacos syntaksfremhevingsfunksjoner for bedre lesbarhet. I tillegg har monaco.editor.create metoden brukes til å initialisere Monaco Editor og gjengi editor-forekomsten innenfor den angitte HTML-beholderen.

Enhetstesten ved hjelp av Jest validerer at JavaScript i JSON-egenskapen er riktig gjenkjent og uthevet. Dette sikrer at løsningen vår er pålitelig og fungerer på tvers av ulike miljøer. Vi implementerer også feilhåndtering med konsoll.feil for å logge eventuelle problemer under redaktørens initialisering. Denne modulære designen lar utviklere enkelt gjenbruke koden og utvide den til andre scenarier der språkinnbygging er nødvendig. Med disse konfigurasjonene kan utviklere nå dra nytte av en mer dynamisk og lesbar opplevelse når de arbeider med JSON-filer som inneholder kjørbar 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*".*?"/);
});

Forbedre syntaksutheving i JSON med innebygd JavaScript

Et aspekt som ikke er diskutert tidligere, er viktigheten av å optimalisere editorytelsen når man arbeider med store JSON-filer som inneholder innebygd JavaScript. Monaco Editor kan håndtere flere språk, men å bygge inn språk i hverandre gir kompleksitet. Uten nøye konfigurasjon kan ytelsen forringes, spesielt hvis tokenisering prosessen blir ineffektiv. For å unngå dette, bør utviklere sikre sine Monarch tokenizer er veldefinert og bruker optimaliserte regulære uttrykk for å minimere behandlingstiden.

En annen kritisk vurdering er redaktørens fleksibilitet med autofullføring. Utviklere kan ønske å forbedre JSON-med-JavaScript-editoren ved å aktivere autofullføring for både JSON-nøkler og JavaScript-kode. For dette er completionItemProvider API i Monaco kan brukes til å gi forslag dynamisk etter hvert som brukeren skriver. Denne funksjonen kan forbedre produktiviteten betydelig når du arbeider med komplekse JSON-strukturer som inneholder evaluerende kodeblokker.

Sikkerhet er et annet viktig aspekt. Innbygging av JavaScript i JSON kan skape bekymringer kodeinnsprøytning risikoer, spesielt i miljøer der brukergenerert innhold er tillatt. Det anbefales å validere og rense JSON-innhold før du gjengir det i redigeringsprogrammet. I tillegg bør utviklere vurdere sandboxing eller begrense kjøringen av innebygd JavaScript for å unngå potensielle sikkerhetssårbarheter. Ved å kombinere disse fremgangsmåtene sikrer du at integreringen av JavaScript i JSON er både jevn og sikker, og oppfyller utviklings- og sikkerhetsstandarder.