Explorador d'AST de JavaScript

Com explorar l’AST d’un codi JavaScript

1. Enganxa el teu codi a Codi JavaScript, o fes clic a Carrega l’exemple per començar amb un petit mòdul.
2. Tria el Tipus de font: Mòdul (import/export, mode estricte) per als mòduls ES, o Script (clàssic) per als scripts normals que poden fer servir característiques del mode no estricte, com ara with.
3. L’arbre s’actualitza un instant després que deixis d’escriure. Fes clic a Analitza per executar l’anàlisi immediatament.
4. A l’Arbre de sintaxi, fes clic a la fletxa petita per desplegar o plegar un node. Fes clic al nom d’un node per seleccionar el codi corresponent a l’editor; el quadre Node seleccionat mostra el tipus, la propietat a la qual pertany, l’interval de caràcters, la línia i la columna, les propietats simples (nom, operador, valor literal…) i el text font.
5. També funciona en sentit contrari: fes clic en qualsevol punt del codi, mou el cursor amb el teclat o selecciona un fragment de codi, i el node més profund que el conté es desplega i es ressalta a l’arbre.
6. Obre JSON d’ESTree per veure l’arbre complet en format JSON, amb o sense Inclou les posicions (start, end, loc), i després Copia‘l o Baixa el JSON.

Els comptadors mostren el nombre de Nodes, la Profunditat màxima de l’arbre i el nombre de Sentències de primer nivell.

Què és un arbre de sintaxi abstracta?

Abans que un motor de JavaScript, un linter o un empaquetador pugui fer res amb el teu codi, n’analitza el text i el converteix en un arbre de nodes. Cada node té un type (VariableDeclaration, CallExpression, Identifier…) i nodes fills guardats en propietats amb nom. Per a total += size; obtens una ExpressionStatement l’expression de la qual és una AssignmentExpression amb l’operador +=, un identificador left anomenat total i un identificador right anomenat size. Els parèntesis, els punts i coma i els comentaris desapareixen: l’arbre només conserva l’estructura que importa, i per això se’n diu abstracta.

Aquesta eina fa servir Acorn, l’analitzador sintàctic petit i ràpid que hi ha darrere de moltes eines de JavaScript, amb ecmaVersion: "latest". La sortida segueix ESTree, el format compartit que també produeix Espree (ESLint) i que entenen la majoria d’eines de transformació de codi. Conèixer els tipus de node exactes és essencial quan escrius una regla d’ESLint, un codemod de Babel o de jscodeshift, un connector de Prettier o qualsevol script que analitzi codi.

Posicions, intervals i exportació en JSON

Cada node porta start i end, els desplaçaments del seu primer caràcter i de l’últim més un dins del codi font, i un objecte loc amb línies (a partir d‘1) i columnes. Al JSON, les columnes comencen en 0, igual que a la sortida d’Acorn; el quadre Node seleccionat les mostra a partir d‘1, com la majoria d’editors. Desmarca Inclou les posicions (start, end, loc) per obtenir un JSON més lleuger i més fàcil de comparar entre dues versions del codi.

Alguns valors no es poden escriure en JSON: els literals d’expressió regular obtenen "value": null (la propietat regex en conserva el patró i els indicadors) i els literals BigInt s’escriuen com a cadenes, tal com recomana l’especificació d’ESTree.

Límits i privadesa

El codi s’analitza al teu navegador i mai no s’executa ni s’envia enlloc: l’analitzador només en llegeix el text. L’entrada està limitada a un milió de caràcters. Els arbres molt grans es mostren sota demanda, un lot de fills cada vegada, i un JSON massa gran per previsualitzar-lo es pot baixar igualment. JSX i TypeScript no són JavaScript estàndard, de manera que Acorn els assenyala com a errors de sintaxi.