Vdelava kode JavaScript v lastnosti JSON z urejevalnikom Monaco Editor

Uporaba urejevalnika Monaco Editor za označevanje JavaScripta v lastnostih JSON

The Urednik Monako je zmogljiv urejevalnik kode, splošno znan kot jedro kode Visual Studio. Ponuja obsežno prilagajanje, vključno s označevanjem sintakse, tokenizacijo in vdelavo različnih jezikov v datoteke. Vendar obstajajo primeri, ko razvijalci potrebujejo napredne nastavitve, kot je vdelava JavaScripta lastnosti JSON.

Pogost izziv se pojavi pri poskusu prikaza kode JavaScript, ki se nahaja znotraj lastnosti JSON, kot da bi bila samostojna Blok JavaScript. To postane bistvenega pomena za projekte, pri katerih JSON ne deluje le kot shramba podatkov, ampak nosi tudi delčke izvršljive kode, kot so tisti pod "eval" premoženje.

V tem članku bom prikazal korake, potrebne za konfiguracijo urejevalnika Monaco Editor za prepoznavanje in pravilen prikaz JavaScripta, vdelanega v polja JSON. Kljub obstoječim vadnicam in predlogom je za doseganje želenega označevanja sintakse potreben bolj prilagojen pristop, ki ga bom raziskal tukaj.

Uporaba desne vzorci tokenizacije in konfiguracije bodo zagotovile, da se Monaco Editor obnaša, kot je predvideno. Navedeni primer kode vsebuje strukturo JSON s poljem »eval«, ki vsebuje kodo JavaScript. Vodil vas bom skozi rešitev in izpostavil nekaj pasti, na katere sem naletel, ko sem poskušal implementirati to funkcijo z uporabo Copilotovih predlogov.

Kako vdelati JavaScript v JSON z urejevalnikom Monaco Editor

Prej navedeni skripti prikazujejo, kako konfigurirati Urednik Monako za prepoznavanje in pravilen prikaz JavaScripta, vdelanega v lastnosti JSON, posebej pod poljem "eval". Ta nastavitev zagotavlja, da lahko urejevalnik razčleni vdelan JavaScript, kot da bi bil del samostojne datoteke JavaScript. Ključ do tega je v definiranju uporabe tokenizerja po meri Monarh sintakso, ki omogoča urejevalniku, da identificira razdelek JavaScript in uporabi pravilno označevanje sintakse znotraj strukture JSON.

Eden najpomembnejših ukazov v primeru je monaco.languages.register. Ta ukaz registrira novo jezikovno konfiguracijo in učinkovito razširi privzeto vedenje Monaca. S tem uvajamo jezik po meri, imenovan "jsonWithJS", da razlikujemo našo izboljšano nastavitev JSON od standardne. Tudi zaposlujemo setMonarchTokensProvider, ki nam omogoča, da razglasimo pravila tokenizacije za novo registrirani jezik. To je ključnega pomena, da urejevalniku povemo, kako naj ravna z vdelanim JavaScriptom znotraj lastnosti "eval".

The nextEmbedded igra ključno vlogo pri omogočanju prehoda iz JSON v JavaScript znotraj enega žetona. Zagotavlja, da se vsebina znotraj polja "eval" obravnava kot JavaScript, čeprav se nahaja v datoteki JSON. Zaradi tega brezhibnega prehoda je koda v polju »eval« prikazana kot JavaScript in koristi razvijalcem, ki se za boljšo berljivost zanašajo na zmožnosti označevanja sintakse Monaca. Poleg tega je monaco.editor.create metoda se uporablja za inicializacijo monaškega urejevalnika in upodabljanje primerka urejevalnika znotraj podanega vsebnika HTML.

Preizkus enote z uporabo Jesta potrdi, da je JavaScript znotraj lastnosti JSON pravilno prepoznan in poudarjen. To zagotavlja, da je naša rešitev zanesljiva in deluje v različnih okoljih. Izvajamo tudi obravnavo napak s konzola.napaka za beleženje morebitnih težav med inicializacijo urejevalnika. Ta modularna zasnova razvijalcem omogoča enostavno ponovno uporabo kode in njeno razširitev za druge scenarije, kjer je potrebna jezikovna vdelava. S temi konfiguracijami lahko razvijalci zdaj izkoristijo bolj dinamično in berljivo izkušnjo pri delu z datotekami JSON, ki vsebujejo izvršljivo kodo JavaScript.

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

Izboljšanje označevanja sintakse v JSON z vdelanim JavaScriptom

Eden od vidikov, ki prej ni bil obravnavan, je pomembnost optimizacije delovanja urejevalnika pri delu z velikimi datotekami JSON, ki vsebujejo vdelan JavaScript. Monaco Editor lahko obravnava več jezikov, vendar vdelava jezikov drug v drugega dodatno zaplete. Brez skrbne konfiguracije se lahko zmogljivost poslabša, zlasti če tokenizacija postopek postane neučinkovit. Da bi se temu izognili, morajo razvijalci zagotoviti svoje Monarch tokenizer je dobro definiran in uporablja optimizirane regularne izraze za zmanjšanje časa obdelave.

Druga kritična točka je prilagodljivost urejevalnika s samodokončanjem. Razvijalci bodo morda želeli izboljšati svoj urejevalnik JSON-with-JavaScript z omogočanjem samodokončanja za ključe JSON in kodo JavaScript. Za to, completionItemProvider API v Monaku se lahko uporablja za dinamično zagotavljanje predlogov med tipkanjem uporabnika. Ta funkcija lahko znatno izboljša produktivnost pri delu s kompleksnimi strukturami JSON, ki vsebujejo bloke ocenjevalne kode.

Varnost je še en pomemben vidik. Vdelava JavaScripta v JSON lahko povzroči pomisleke glede vbrizgavanje kode tveganja, zlasti v okoljih, kjer je dovoljena uporabniško ustvarjena vsebina. Priporočamo, da vsebino JSON preverite in očistite, preden jo upodabljate v urejevalniku. Poleg tega bi morali razvijalci razmisliti o peskovniku ali omejitvi izvajanja vdelanega JavaScripta, da bi se izognili morebitnim varnostnim ranljivostim. Kombinacija teh praks zagotavlja, da je integracija JavaScripta v JSON gladka in varna ter izpolnjuje razvojne in varnostne standarde.