JavaScript AST Explorer

Så utforskar du ett JavaScript-AST

1. Klistra in din kod i JavaScript-kod, eller klicka på Ladda exemplet för att börja med en liten modul.
2. Välj Källtyp: Modul (import/export, strict mode) för ES-moduler, eller Skript (klassiskt) för vanliga skript som kan använda funktioner från sloppy mode, till exempel with.
3. Trädet uppdateras en kort stund efter att du slutat skriva. Klicka på Tolka för att köra direkt.
4. I Syntaxträd klickar du på den lilla pilen för att fälla ut eller fälla ihop en nod. Klicka på en nods namn för att markera motsvarande kod i redigeraren. Panelen Vald nod visar typen, egenskapen som noden hör till, teckenintervallet, rad och kolumn, de enkla egenskaperna (namn, operator, råvärde…) och nodens källtext.
5. Det fungerar också åt andra hållet: klicka var som helst i koden, flytta markören med tangentbordet eller markera en bit kod, så fälls den djupaste noden som innehåller den ut och markeras i trädet.
6. Öppna ESTree-JSON för att se hela trädet som JSON, med eller utan Ta med positioner (start, end, loc). Sedan kan du Kopiera det eller klicka på Ladda ner JSON.

Räknarna visar antalet Noder, trädets Maximalt djup och antalet Satser på toppnivå.

Vad är ett abstrakt syntaxträd?

Innan en JavaScript-motor, en linter eller en bundler kan göra något med din kod tolkas texten till ett träd av noder. Varje nod har en type (VariableDeclaration, CallExpression, Identifier…) och barnnoder som lagras i namngivna egenskaper. För total += size; får du ett ExpressionStatement vars expression är ett AssignmentExpression med operatorn +=, en left-identifierare total och en right-identifierare size. Parenteser, semikolon och kommentarer försvinner: trädet behåller bara den struktur som spelar roll, och det är därför det kallas abstrakt.

Verktyget använder Acorn, den lilla och snabba parsern bakom många JavaScript-verktyg, med ecmaVersion: "latest". Resultatet följer ESTree, det gemensamma formatet som även Espree (ESLint) producerar och som de flesta verktyg för kodtransformation förstår. Att känna till de exakta nodtyperna är avgörande när du skriver en ESLint-regel, en codemod för Babel eller jscodeshift, ett Prettier-plugin eller ett skript som analyserar kod.

Positioner, intervall och JSON-export

Varje nod har start och end, alltså positionen för det första tecknet och positionen efter det sista tecknet i källkoden, samt ett loc-objekt med rader (från 1) och kolumner. I JSON-datan börjar kolumnerna på 0, precis som i Acorns utdata. Panelen Vald nod visar dem från 1, som de flesta kodredigerare gör. Avmarkera Ta med positioner (start, end, loc) för att få en lättare JSON som är enklare att jämföra mellan två versioner av koden.

Några värden kan inte skrivas som JSON: reguljära uttryck får "value": null (egenskapen regex behåller mönster och flaggor) och BigInt-literaler skrivs som strängar, så som ESTree-specifikationen rekommenderar.

Begränsningar och integritet

Koden tolkas i din webbläsare och körs aldrig eller skickas någonstans: parsern läser bara texten. Indata är begränsad till en miljon tecken. Mycket stora träd ritas upp vid behov, en omgång barnnoder i taget, och en JSON som är för stor för att förhandsgranskas kan ändå laddas ner. JSX och TypeScript är inte standard-JavaScript, så Acorn rapporterar dem som syntaxfel.