Dentro del AST: Cómo las Herramientas Entienden el Código

Cada vez que ESLint señala un problema antes de que ejecutes tu código, o Prettier reformatea una función desordenada en el momento en que guardas, algo preciso está ocurriendo bajo el capó. Estas herramientas no están leyendo tu código fuente como texto. Lo están leyendo como un árbol estructurado. Entender ese árbol — el Árbol de Sintaxis Abstracta (AST, por sus siglas en inglés) — explica cómo funcionan casi todas las herramientas modernas de desarrollo.

¿Qué Es un Árbol de Sintaxis Abstracta?

Cuando una herramienta analiza tu código fuente, pasa por dos etapas.

Primero, un lexer (o tokenizador) divide el texto sin procesar en tokens: palabras clave, identificadores, operadores, puntuación. Luego, un parser toma esos tokens y construye un árbol que representa la estructura gramatical de tu código.

Ese árbol es el AST. Se llama “abstracto” porque a menudo descarta detalles superficiales — espacios en blanco, la mayoría de la puntuación y paréntesis utilizados puramente para agrupar — mientras mantiene lo que es semánticamente significativo.

Toma esta línea:

const x = 5 + 3

Un parser produce algo como esto:

{
  "type": "VariableDeclaration",
  "kind": "const",
  "declarations": [{
    "type": "VariableDeclarator",
    "id": { "type": "Identifier", "name": "x" },
    "init": {
      "type": "BinaryExpression",
      "operator": "+",
      "left":  { "type": "Literal", "value": 5 },
      "right": { "type": "Literal", "value": 3 }
    }
  }]
}

Cada nodo tiene un type. Los nodos hijos se anidan dentro de los nodos padre. El programa completo se convierte en un árbol con raíz en un nodo Program.

Puedes explorar esto directamente usando AST Explorer, que te permite pegar cualquier código JavaScript o TypeScript e inspeccionar el árbol resultante en tiempo real.

Cómo los Linters y Formateadores Utilizan los ASTs

Una vez que una herramienta tiene el AST, puede hacer algo útil: recorrerlo.

La mayoría de las herramientas utilizan el patrón visitor. Registras una función para un tipo de nodo específico, y el motor de recorrido llama a esa función cada vez que encuentra un nodo coincidente.

ESLint funciona exactamente de esta manera. Cada regla de lint es un objeto visitor. Cuando ESLint recorre el AST, llama a los manejadores de reglas relevantes en cada nodo. Una regla que prohíbe == en favor de === simplemente escucha nodos BinaryExpression y verifica la propiedad operator.

Babel utiliza el mismo enfoque para la transformación de código. Analiza el código fuente en un AST, aplica transformaciones basadas en visitors que modifican nodos, luego imprime el árbol modificado de vuelta al código fuente. Así es como compila la sintaxis moderna de JavaScript en equivalentes más antiguos.

Prettier toma un enfoque diferente. Analiza el código en un AST, descarta todo el formato original y reimprime el árbol según sus propias reglas de diseño. El AST es la fuente de verdad — no el texto original.

AST vs. CST: Cuando la Estructura Importa Más

Un AST omite tokens que son sintácticamente requeridos pero semánticamente redundantes. Un Árbol de Sintaxis Concreta (CST) mantiene la estructura sintáctica completa del código fuente, reteniendo tokens y sus posiciones.

Tree-sitter produce un árbol de sintaxis concreta optimizado para análisis incremental. Debido a que puede actualizar solo la porción del árbol afectada por una edición, es muy adecuado para resaltado de sintaxis, plegado de código y edición estructural dentro de editores modernos como Neovim y Zed.

El Cambio Hacia el Análisis de Alto Rendimiento

Las herramientas más nuevas en el ecosistema de JavaScript están llevando el rendimiento del análisis significativamente más lejos. Proyectos como Biome y Oxc están implementados en Rust y construyen sus propios analizadores y representaciones AST desde cero.

Manejan linting y formateo a velocidades que a menudo superan a los analizadores basados en JavaScript, mientras soportan sintaxis moderna como atributos de importación y características recientes de TypeScript.

El modelo subyacente es el mismo — analizar a un árbol, recorrerlo, aplicar análisis o transformación — pero la implementación está optimizada para escala.

Conclusión

Ya sea que estés escribiendo una regla personalizada de ESLint, construyendo un codemod con jscodeshift, o simplemente tratando de entender por qué una herramienta se comporta de la manera en que lo hace, el AST es el lugar correcto para mirar. Es la representación estructurada sobre la cual se construye cada herramienta seria de desarrollo. Una vez que puedes leer un árbol de sintaxis, el comportamiento de linters, formateadores y compiladores deja de sentirse como magia.

Preguntas Frecuentes

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.