JavaScript AST-utforsker

Slik utforsker du et JavaScript-AST

1. Lim inn koden din i JavaScript-kode, eller klikk Last inn eksempelet for å starte med en liten modul.
2. Velg Kildetype: Modul (import/export, streng modus) for ES-moduler, eller Skript (klassisk) for vanlige skript som kan bruke funksjoner fra slapp modus, for eksempel with.
3. Treet oppdateres et øyeblikk etter at du slutter å skrive. Klikk Analyser hvis du vil kjøre analysen med en gang.
4. I Syntakstre klikker du på den lille pilen for å åpne eller lukke en node. Klikk på navnet til en node for å markere den tilhørende koden i editoren. Panelet Valgt node viser typen, egenskapen noden tilhører, tegnområdet, linje og kolonne, enkle egenskaper (navn, operator, råverdi …) og kildeteksten.
5. Det virker også motsatt vei: klikk et sted i koden, flytt markøren med tastaturet eller marker et stykke kode, så åpnes og utheves den dypeste noden som inneholder det, i treet.
6. Åpne ESTree JSON for å se hele treet som JSON, med eller uten Ta med posisjoner (start, end, loc). Deretter kan du kopiere det med Kopier eller bruke Last ned JSON.

Tellerne viser antall Noder, treets Maksimal dybde og antall Setninger på toppnivå.

Hva er et abstrakt syntakstre?

Før en JavaScript-motor, en linter eller en bundler kan gjøre noe med koden din, tolkes teksten til et tre av noder. Hver node har en type (VariableDeclaration, CallExpression, Identifier …) og barnenoder som ligger i navngitte egenskaper. For total += size; får du en ExpressionStatement der expression er en AssignmentExpression med operatoren +=, en venstreside left som er identifikatoren total, og en høyreside right som er identifikatoren size. Parenteser, semikolon og kommentarer forsvinner: treet beholder bare den strukturen som betyr noe, og det er derfor det kalles abstrakt.

Dette verktøyet bruker Acorn, den lille og raske parseren bak mange JavaScript-verktøy, med ecmaVersion: "latest". Resultatet følger ESTree, det felles formatet som også Espree (ESLint) lager, og som de fleste verktøy for kodetransformasjon forstår. Å kjenne de nøyaktige nodetypene er avgjørende når du skriver en ESLint-regel, en Babel- eller jscodeshift-codemod, en Prettier-plugin eller et hvilket som helst skript som analyserer kode.

Posisjoner, områder og JSON-eksport

Hver node har start og end, posisjonene til det første tegnet og tegnet rett etter det siste i kilden, og et loc-objekt med linjer (fra 1) og kolonner. I JSON-en starter kolonnene på 0, slik de gjør i Acorns utdata. Panelet Valgt node viser dem fra 1, som de fleste editorer gjør. Fjern avkrysningen for Ta med posisjoner (start, end, loc) for å få en lettere JSON som er enklere å sammenligne mellom to versjoner av koden.

Noen verdier kan ikke skrives som JSON. Regulære uttrykk får "value": null (egenskapen regex beholder mønsteret og flaggene), og BigInt-literaler skrives som strenger, slik ESTree-spesifikasjonen anbefaler.

Begrensninger og personvern

Koden analyseres i nettleseren din og blir aldri kjørt eller sendt noe sted: parseren leser bare teksten. Inndata er begrenset til én million tegn. Svært store trær tegnes etter behov, en gruppe barnenoder om gangen, og en JSON som er for stor til forhåndsvisning, kan fortsatt lastes ned. JSX og TypeScript er ikke standard JavaScript, så Acorn melder dem som syntaksfeil.