JavaScript AST Explorer

Sådan udforsker du et JavaScript-AST

1. Indsæt din kode i JavaScript-kode, eller klik på Indlæs eksemplet for at starte med et lille modul.
2. Vælg Kildetype: Modul (import/export, strict mode) til ES-moduler eller Script (klassisk) til almindelige scripts, der kan bruge sloppy mode-funktioner som with.
3. Træet opdateres et øjeblik efter, at du holder op med at skrive. Klik på Parse for at køre det med det samme.
4. I Syntakstræ klikker du på den lille pil for at folde en node ud eller sammen. Klik på en nodes navn for at markere den tilsvarende kode i editoren. Panelet Valgt node viser nodens type, den egenskab, den hører til, tegnintervallet, linje og kolonne, de simple egenskaber (navn, operator, rå værdi …) og nodens kildekode.
5. Det virker også den anden vej: Klik et vilkårligt sted i koden, flyt markøren med tastaturet, eller markér et stykke kode. Så foldes den dybeste node, der indeholder det, ud og fremhæves i træet.
6. Åbn ESTree JSON for at se hele træet som JSON, med eller uden Medtag positioner (start, end, loc), og Kopiér det eller Download JSON.

Tællerne viser antallet af Noder, træets Maksimal dybde og antallet af Sætninger på øverste niveau.

Hvad er et abstrakt syntakstræ?

Før en JavaScript-motor, en linter eller en bundler kan gøre noget med din kode, parser den teksten til et træ af noder. Hver node har en type (VariableDeclaration, CallExpression, Identifier …) og underordnede noder, der ligger i navngivne egenskaber. For total += size; får du en ExpressionStatement, hvis expression er en AssignmentExpression med operatoren +=, en left-identifier total og en right-identifier size. Parenteser, semikolon og kommentarer forsvinder: Træet beholder kun den struktur, der har betydning, og det er derfor, det kaldes abstrakt.

Dette værktøj bruger Acorn, den lille og hurtige parser bag mange JavaScript-værktøjer, med ecmaVersion: "latest". Resultatet følger ESTree, det fælles format, som også Espree (ESLint) producerer, og som de fleste værktøjer til kodetransformation forstår. Det er vigtigt at kende de præcise nodetyper, når du skriver en ESLint-regel, en Babel- eller jscodeshift-codemod, et Prettier-plugin eller et hvilket som helst script, der analyserer kode.

Positioner, intervaller og JSON-eksport

Hver node har start og end, altså positionen for det første tegn og for tegnet lige efter det sidste i kildeteksten, og et loc-objekt med linjer (fra 1) og kolonner. I JSON begynder kolonnerne ved 0, som i Acorns output. Panelet Valgt node viser dem fra 1 som de fleste editorer. Fjern markeringen i Medtag positioner (start, end, loc) for at få en lettere JSON, der er nemmere at sammenligne mellem to versioner af koden.

Nogle værdier kan ikke skrives som JSON: Regulære udtryk får "value": null (egenskaben regex beholder mønsteret og flagene), og BigInt-literaler skrives som strenge, sådan som ESTree-specifikationen anbefaler.

Grænser og privatliv

Koden parses i din browser og bliver aldrig udført eller sendt nogen steder hen: Parseren læser kun teksten. Input er begrænset til en million tegn. Meget store træer tegnes efter behov, en portion underordnede noder ad gangen, og en JSON-fil, der er for stor til forhåndsvisning, kan stadig downloades. JSX og TypeScript er ikke standard-JavaScript, så Acorn melder dem som syntaksfejl.