JavaScript AST-skoðari

Hvernig á að skoða JavaScript AST

1. Límdu kóðann þinn í reitinn JavaScript-kóði eða smelltu á Hlaða inn dæmi til að byrja á lítilli einingu.
2. Veldu Tegund frumkóða: Eining (import/export, strangur hamur) fyrir ES-einingar eða Skripta (hefðbundin) fyrir venjulegar skriftur sem mega nota eiginleika slakrar stillingar eins og with.
3. Tréð uppfærist augnabliki eftir að þú hættir að skrifa. Smelltu á Þátta til að keyra það strax.
4. Í Setningafræðitré smellirðu á litlu örina til að opna eða loka hnút. Smelltu á heiti hnúts til að velja samsvarandi kóða í ritlinum. Spjaldið Valinn hnútur sýnir tegund hans, eigindið sem hann tilheyrir, Svið (stafastöður), línu og dálk, einföld gildi (heiti, virkja, hrátt gildi …) og frumkóða hans.
5. Þetta virkar líka á hinn veginn: smelltu hvar sem er í kóðanum, færðu bendilinn með lyklaborðinu eða veldu hluta kóðans, og dýpsti hnúturinn sem inniheldur valið er opnaður og auðkenndur í trénu.
6. Opnaðu ESTree JSON til að sjá allt tréð sem JSON, með eða án Hafa staðsetningar með (start, end, loc). Þar getur þú afritað það með Afrita eða notað Sækja JSON.

Teljararnir sýna fjölda Hnútar, Mesta dýpt trésins og fjölda Setningar á efsta stigi.

Hvað er óhlutbundið setningafræðitré?

Áður en JavaScript-vél, kóðaskoðari (linter) eða pakkari getur gert nokkuð við kóðann þinn þáttar hann textann í tré hnúta. Hver hnútur hefur tegund (VariableDeclaration, CallExpression, Identifier …) og undirhnúta sem geymdir eru í nefndum eigindum. Fyrir total += size; færðu ExpressionStatement þar sem expression er AssignmentExpression með virkjanum +=, auðkenninu total vinstra megin og size hægra megin. Svigar, semíkommur og athugasemdir hverfa: tréð heldur aðeins eftir uppbyggingunni sem skiptir máli, og þess vegna kallast það óhlutbundið.

Þetta verkfæri notar Acorn, lítinn og hraðvirkan þáttara sem mörg JavaScript-verkfæri byggja á, með ecmaVersion: "latest". Úttakið fylgir ESTree, sameiginlega sniðinu sem Espree (ESLint) býr líka til og flest kóðabreytingarverkfæri skilja. Nákvæm þekking á tegundum hnúta er nauðsynleg þegar þú skrifar ESLint-reglu, Babel- eða jscodeshift-breytingu, Prettier-viðbót eða hvaða forskrift sem greinir kóða.

Staðsetningar, svið og JSON-útflutningur

Hver hnútur ber start og end, stöður fyrsta stafsins og stafsins á eftir þeim síðasta í frumtextanum, og loc-hlut með línum (frá 1) og dálkum. Í JSON-inu byrja dálkar á 0 eins og í úttaki Acorn, en spjaldið Valinn hnútur sýnir þá frá 1 eins og flestir ritlar. Taktu hakið úr Hafa staðsetningar með (start, end, loc) til að fá léttara JSON sem auðveldara er að bera saman milli tveggja útgáfa af kóðanum.

Nokkur gildi er ekki hægt að rita sem JSON: reglulegar segðir fá "value": null (eigindið regex heldur mynstrinu og flögum) og BigInt-gildi eru skrifuð sem strengir, eins og ESTree-skilgreiningin mælir með.

Takmörk og persónuvernd

Kóðinn er þáttaður í vafranum þínum og er aldrei keyrður né sendur neitt: þáttarinn les aðeins textann. Inntakið er takmarkað við eina milljón stafi. Mjög stór tré eru teiknuð eftir þörfum, einn hóp undirhnúta í einu, og JSON sem er of stórt til forskoðunar er samt hægt að sækja. JSX og TypeScript eru ekki hefðbundið JavaScript, svo Acorn tilkynnir þau sem setningafræðivillur.