Explorador AST de JavaScript

Cómo explorar el AST de un código JavaScript

1. Pega tu código en Código JavaScript o haz clic en Cargar el ejemplo para empezar con un pequeño módulo.
2. Elige el Tipo de código: Módulo (import/export, modo estricto) para módulos ES, o Script (clásico) para scripts tradicionales que pueden usar funciones del modo no estricto, como with.
3. El árbol se actualiza un instante después de que dejas de escribir. Haz clic en Analizar para lanzarlo al momento.
4. En el Árbol sintáctico, pulsa la flechita para desplegar o contraer un nodo. Haz clic en el nombre de un nodo para seleccionar el código correspondiente en el editor; el panel Nodo seleccionado muestra su tipo, la propiedad a la que pertenece, su rango de caracteres, su línea y columna, sus propiedades simples (nombre, operador, valor literal…) y su código fuente.
5. También funciona al revés: haz clic en cualquier parte del código, mueve el cursor con el teclado o selecciona un fragmento, y el nodo más profundo que lo contiene se despliega y se resalta en el árbol.
6. Abre JSON ESTree para ver el árbol completo en JSON, con o sin Incluir posiciones (start, end, loc), y luego Copiar o Descargar JSON.

Los contadores muestran el número de Nodos, la Profundidad máxima del árbol y el número de Sentencias de nivel superior.

¿Qué es un árbol de sintaxis abstracta?

Antes de que un motor de JavaScript, un linter o un empaquetador puedan hacer algo con tu código, lo analizan y convierten el texto en un árbol de nodos. Cada nodo tiene un type (VariableDeclaration, CallExpression, Identifier…) y nodos hijos guardados en propiedades con nombre. Para total += size; obtienes un ExpressionStatement cuya expression es un AssignmentExpression con el operador +=, un identificador left llamado total y un identificador right llamado size. Los paréntesis, los puntos y coma y los comentarios desaparecen: el árbol conserva solo la estructura que importa, y por eso se llama abstracto.

Esta herramienta usa Acorn, el analizador pequeño y rápido que hay detrás de muchas herramientas de JavaScript, con ecmaVersion: "latest". El resultado sigue ESTree, el formato común que también genera Espree (ESLint) y que entienden la mayoría de las herramientas de transformación de código. Conocer los tipos exactos de nodo es imprescindible cuando escribes una regla de ESLint, un codemod de Babel o jscodeshift, un plugin de Prettier o cualquier script que analice código.

Posiciones, rangos y exportación JSON

Cada nodo lleva start y end, las posiciones de su primer carácter y del siguiente a su último carácter en el código, y un objeto loc con líneas (desde 1) y columnas. En el JSON, las columnas empiezan en 0, como en la salida de Acorn; el panel Nodo seleccionado las muestra desde 1, como la mayoría de los editores. Desmarca Incluir posiciones (start, end, loc) para obtener un JSON más ligero y fácil de comparar entre dos versiones del código.

Algunos valores no se pueden escribir en JSON: los literales de expresiones regulares reciben "value": null (su propiedad regex conserva el patrón y los flags) y los literales BigInt se escriben como cadenas, tal como recomienda la especificación ESTree.

Límites y privacidad

El código se analiza en tu navegador y nunca se ejecuta ni se envía a ningún sitio: el analizador solo lee el texto. La entrada está limitada a un millón de caracteres. Los árboles muy grandes se muestran bajo demanda, por bloques de hijos, y un JSON demasiado grande para la vista previa se puede descargar igualmente. JSX y TypeScript no son JavaScript estándar, así que Acorn los señala como errores de sintaxis.