Utilia
Kategorijos ▾
Kalba: lt ▾

JavaScript AST naršyklė

Įklijuok JavaScript kodą ir naršyklėje peržiūrėk jo abstraktų sintaksės medį (ESTree, Acorn). Spustelėk mazgus ir eksportuok AST kaip JSON.

Šaltinio tipas
Mazgai
–
Didžiausias gylis
–
Aukščiausio lygio sakiniai
–
Sintaksės medis

Spustelėk mazgą, kad pažymėtum jo kodą. Spustelėk kodą arba perkelk žymeklį, kad rastum jo mazgą.

    Pasirinktas mazgas

    Pasirink mazgą medyje arba spustelėk kodą.

    ESTree JSON

    Kaip naršyti JavaScript AST

    1. Įklijuok kodą į lauką JavaScript kodas arba spustelėk Įkelti pavyzdį, kad pradėtum nuo nedidelio modulio.
    2. Pasirink Šaltinio tipas: Modulis (import/export, griežtasis režimas) ES moduliams arba Scenarijus (klasikinis) įprastiems scenarijams, kuriuose gali būti negriežtojo režimo konstrukcijų, pavyzdžiui, with.
    3. Medis atnaujinamas akimirką po to, kai nustoji rašyti. Spustelėk Analizuoti, jei nori rezultato iš karto.
    4. Lange Sintaksės medis spustelėk mažą rodyklę, kad išskleistum ar suskleistum mazgą. Spustelėk mazgo pavadinimą, kad redaktoriuje pažymėtum atitinkamą kodą. Skydelis Pasirinktas mazgas parodo jo Tipas, Savybė, kuriai jis priklauso, simbolių Intervalas, eilutę ir stulpelį (Vieta), paprastas savybes (vardą, operatorių, pradinę reikšmę ir kt.) bei Mazgo šaltinio kodas.
    5. Veikia ir atvirkščiai: spustelėk bet kurią kodo vietą, perkelk žymeklį klaviatūra arba pažymėk kodo fragmentą, ir giliausias mazgas, kuriame jis yra, bus išskleistas bei paryškintas medyje.
    6. Atidaryk ESTree JSON, kad pamatytum visą medį kaip JSON, su Įtraukti pozicijas (start, end, loc) arba be jos, tada jį Kopijuoti arba Atsisiųsti JSON.

    Skaitikliai rodo Mazgai skaičių, Didžiausias gylis ir Aukščiausio lygio sakiniai.

    Kas yra abstraktus sintaksės medis?

    Kad JavaScript variklis, linteris ar paketų sudarymo įrankis galėtų ką nors daryti su tavo kodu, jis pirmiausia išanalizuoja tekstą į mazgų medį. Kiekvienas mazgas turi type (VariableDeclaration, CallExpression, Identifier…) ir vaikinius mazgus, laikomus pavadintose savybėse. Iš total += size; gaunamas ExpressionStatement, kurio expression yra AssignmentExpression su operatoriumi +=, kairiuoju identifikatoriumi total ir dešiniuoju size. Skliaustai, kabliataškiai ir komentarai išnyksta: medis palieka tik svarbią struktūrą, todėl jis vadinamas abstrakčiu.

    Šis įrankis naudoja Acorn – mažą ir greitą analizatorių, kuriuo remiasi daugelis JavaScript įrankių, su ecmaVersion: "latest". Rezultatas atitinka ESTree – bendrą formatą, kurį sukuria ir Espree (ESLint) ir supranta dauguma kodo transformavimo įrankių. Tikslūs mazgų tipai būtini rašant ESLint taisyklę, Babel ar jscodeshift kodo modifikatorių, Prettier įskiepį ar bet kokį kodą analizuojantį scenarijų.

    Pozicijos, intervalai ir JSON eksportas

    Kiekvienas mazgas turi start ir end – pirmojo ir paskutinio plius vieno simbolio poslinkius šaltinyje, taip pat loc objektą su eilutėmis (nuo 1) ir stulpeliais. JSON stulpeliai skaičiuojami nuo 0, kaip Acorn išvestyje, o skydelyje Pasirinktas mazgas – nuo 1, kaip daugelyje redaktorių. Išjunk Įtraukti pozicijas (start, end, loc), kad gautum lengvesnį JSON, kurį paprasčiau palyginti tarp dviejų kodo versijų.

    Kai kurių reikšmių JSON negali išreikšti: reguliariųjų reiškinių literalai gauna "value": null (jų regex savybėje lieka šablonas ir vėliavėlės), o BigInt literalai rašomi kaip eilutės, kaip rekomenduoja ESTree specifikacija.

    Apribojimai ir privatumas

    Kodas analizuojamas tavo naršyklėje ir niekada nevykdomas bei niekur nesiunčiamas: analizatorius tik skaito tekstą. Įvestis ribojama iki milijono simbolių. Labai dideli medžiai atvaizduojami pagal poreikį, po keletą vaikinių mazgų, o per didelį peržiūrai JSON vis tiek galima atsisiųsti. JSX ir TypeScript nėra standartinis JavaScript, todėl Acorn juos praneša kaip sintaksės klaidas.

    Dažnai užduodami klausimai

    Kodėl gaunu „Sintaksės klaida: eilutė 1, stulpelis 1“?

    Kodas nėra teisingas JavaScript pasirinktam šaltinio tipui. Pranešime nurodyta eilutė, stulpelis ir Acorn paaiškinimas. Dažna priežastis – import arba export, kai pasirinkta Scenarijus (klasikinis), taip pat TypeScript anotacijos ar JSX, kurių Acorn neanalizuoja.

    Kuo skiriasi modulis ir scenarijus?

    Moduliai visada veikia griežtuoju režimu, leidžia import, export ir aukščiausio lygio await, bet draudžia with ar aštuntainius literalus. Scenarijai yra klasikinis <script> režimas. Pasirinkimas užfiksuojamas ir medyje – Program mazgo savybėje sourceType.

    Ar kodas vykdomas?

    Ne. Analizė tik paverčia tekstą duomenų struktūra. Niekas nevertinamas, jokia funkcija nekviečiama ir joks tinklo užklausimas nesiunčiamas, todėl saugu tikrinti nepatikimą ar net kenkėjišką kodą.

    Ar komentarai rodomi medyje?

    Ne. ESTree komentarų prie mazgų neprijungia, todėl jie nėra medžio dalis, tačiau skydelyje Pasirinktas mazgas juos vis tiek galima pamatyti mazgo šaltinio tekste.

    Kokia JavaScript versija palaikoma?

    Acorn nustatytas naujausiai jam žinomai ECMAScript versijai, kuri apima pasirenkamąją grandinę (?.), nulinį sujungimą (??), BigInt, klasių laukus ir privačius metodus, aukščiausio lygio await, reguliariųjų reiškinių vėliavėles, pavyzdžiui, v, ir kitą naują sintaksę.

    Susiję įrankiai