JavaScript-kód beágyazása a JSON-tulajdonságokba a Monaco Editor segítségével

A Monaco Editor használata a JavaScript kiemelésére a JSON-tulajdonságokban

A Monaco szerkesztő egy hatékony kódszerkesztő, amely széles körben ismert a Visual Studio Code mögött. Széles körű testreszabást kínál, beleértve a szintaxis kiemelését, a tokenizálást és a különböző nyelvek beágyazását a fájlokba. Vannak azonban olyan esetek, amikor a fejlesztőknek speciális beállításokra van szükségük, például JavaScript beágyazására JSON-tulajdonságok.

Gyakori kihívás adódik, amikor olyan JavaScript-kódot próbálunk megjeleníteni, amely a JSON-tulajdonságokon belül található, mintha önálló lenne. JavaScript blokk. Ez elengedhetetlenné válik azoknál a projekteknél, ahol a JSON nem csak adattárolóként működik, hanem végrehajtható kódrészleteket is hordoz, például a "eval" ingatlan.

Ebben a cikkben bemutatom a Monaco Editor konfigurálásához szükséges lépéseket a JSON-mezőkbe ágyazott JavaScript felismerésére és helyes megjelenítésére. A meglévő oktatóanyagok és javaslatok ellenére a kívánt szintaxiskiemelés elérése személyre szabottabb megközelítést igényel, amelyet itt fogok megvizsgálni.

A jobboldal használatával tokenizációs minták és a konfigurációk biztosítják, hogy a Monaco Editor rendeltetésszerűen működjön. A megadott példakód JSON-struktúrát tartalmaz egy JavaScript-kódot tartalmazó „eval” mezővel. Végigvezetem a megoldáson, és kiemelek néhány buktatót, amelyekkel találkoztam, miközben megpróbáltam megvalósítani ezt a funkciót a Copilot javaslatai alapján.

JavaScript beágyazása JSON-ba a Monaco Editor segítségével

A korábban biztosított szkriptek bemutatják, hogyan kell konfigurálni a Monaco szerkesztő a JSON-tulajdonságokba ágyazott JavaScript felismerésére és helyes megjelenítésére, különösen az „eval” mező alatt. Ez a beállítás biztosítja, hogy a szerkesztő úgy tudja elemezni a beágyazott JavaScriptet, mintha az egy önálló JavaScript-fájl része lenne. Ennek eléréséhez a kulcs az egyéni tokenizátor meghatározásában rejlik Uralkodó szintaxis, amely lehetővé teszi a szerkesztő számára, hogy azonosítsa a JavaScript szakaszt, és megfelelő szintaktikai kiemelést alkalmazzon a JSON-struktúrán belül.

A példa egyik legfontosabb parancsa az monaco.languages.register. Ez a parancs egy új nyelvi konfigurációt regisztrál, hatékonyan kiterjesztve Monaco alapértelmezett viselkedését. Ennek használatával bevezetünk egy „jsonWithJS” nevű egyéni nyelvet, amely megkülönbözteti továbbfejlesztett JSON-beállításunkat a szabványostól. Mi is alkalmazunk setMonarchTokensProvider, amely lehetővé teszi az újonnan regisztrált nyelv tokenizációs szabályainak deklarálását. Ez döntő fontosságú ahhoz, hogy megmondja a szerkesztőnek, hogyan kell kezelni az "eval" tulajdonságon belüli beágyazott JavaScriptet.

A nextEbedded tulajdonság kritikus szerepet játszik a JSON-ról a JavaScript-re való áttérés lehetővé tételében egyetlen tokenen belül. Biztosítja, hogy az „eval” mezőben lévő tartalom JavaScript-ként legyen kezelve, még akkor is, ha az egy JSON-fájlban található. Ez a zökkenőmentes átmenet az „eval” mezőben lévő kódot JavaScriptként jeleníti meg, és előnyökkel jár azon fejlesztők számára, akik a jobb olvashatóság érdekében a Monaco szintaxiskiemelő képességeire támaszkodnak. Ezenkívül a monaco.editor.create metódust használják a Monaco Editor inicializálására és a szerkesztőpéldány megjelenítésére a megadott HTML-tárolóban.

A Jest használatával végzett egységteszt ellenőrzi, hogy a JSON-tulajdonságon belüli JavaScript helyesen felismerve és kiemelve van-e. Ez biztosítja, hogy megoldásunk megbízható és különböző környezetekben működjön. A hibakezelést is megvalósítjuk konzol.hiba a szerkesztő inicializálása során felmerülő problémák naplózásához. Ez a moduláris felépítés lehetővé teszi a fejlesztők számára, hogy könnyen újrafelhasználhassák a kódot, és kiterjesszék más olyan helyzetekre is, ahol nyelvi beágyazás szükséges. Ezekkel a konfigurációkkal a fejlesztők dinamikusabb és olvashatóbb élményben részesülhetnek, amikor futtatható JavaScript-kódot tartalmazó JSON-fájlokkal dolgoznak.

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

A szintaxis kiemelésének javítása JSON-ban beágyazott JavaScript segítségével

Az egyik korábban nem tárgyalt szempont a szerkesztő teljesítményének optimalizálásának fontossága a beágyazott JavaScriptet tartalmazó nagy JSON-fájlok kezelésekor. A Monaco Editor több nyelvet is képes kezelni, de a nyelvek egymásba ágyazása bonyolultabbá teszi. Gondos konfiguráció nélkül a teljesítmény romolhat, különösen, ha a tokenizálás a folyamat hatástalanná válik. Ennek elkerülése érdekében a fejlesztőknek gondoskodniuk kell arról Monarch tokenizer jól definiált, és optimalizált reguláris kifejezéseket használ a feldolgozási idő minimalizálása érdekében.

Egy másik kritikus szempont a szerkesztő rugalmassága az automatikus kiegészítéssel. Előfordulhat, hogy a fejlesztők javítani szeretnék a JSON-JavaScript-szerkesztőjükön az automatikus kiegészítés engedélyezésével mind a JSON-kulcsok, mind a JavaScript-kód esetében. Ehhez a befejezésItemProvider A monacói API segítségével dinamikusan adhatunk javaslatokat a felhasználó gépelése közben. Ez a funkció jelentősen javíthatja a termelékenységet, ha kiértékelő kódblokkokat tartalmazó összetett JSON-struktúrákkal dolgozik.

A biztonság egy másik lényeges szempont. A JavaScript JSON-ba ágyazása aggályokat vethet fel kódbefecskendezés kockázatokat, különösen olyan környezetekben, ahol a felhasználók által generált tartalom megengedett. Javasoljuk a JSON-tartalom ellenőrzését és megtisztítását a szerkesztőben való megjelenítés előtt. Ezenkívül a fejlesztőknek fontolóra kell venniük a homokozó használatát vagy a beágyazott JavaScript végrehajtásának korlátozását a potenciális biztonsági rések elkerülése érdekében. E gyakorlatok kombinálása biztosítja, hogy a JavaScript integrációja a JSON-ba zökkenőmentes és biztonságos legyen, és megfeleljen a fejlesztési és biztonsági szabványoknak.