Explorateur d'AST JavaScript

Comment explorer l’AST d’un code JavaScript

1. Collez votre code dans Code JavaScript, ou cliquez sur Charger l’exemple pour partir d’un petit module.
2. Choisissez le Type de source : Module (import/export, mode strict) pour les modules ES, ou Script (classique) pour un script ordinaire qui peut utiliser des tournures du mode non strict comme with.
3. L’arbre se met à jour un court instant après la frappe. Le bouton Analyser relance l’analyse tout de suite.
4. Dans l’Arbre syntaxique, la petite flèche déplie ou replie un nœud. Un clic sur le nom d’un nœud sélectionne le code correspondant dans l’éditeur ; le panneau Nœud sélectionné affiche son type, la propriété qui le contient, sa plage de caractères, sa ligne et sa colonne, ses propriétés simples (nom, opérateur, valeur brute…) et son code source.
5. Cela marche aussi dans l’autre sens : cliquez n’importe où dans le code, déplacez le curseur au clavier ou sélectionnez un passage, et le nœud le plus profond qui le contient est déplié et mis en évidence dans l’arbre.
6. Ouvrez JSON ESTree pour voir l’arbre complet en JSON, avec ou sans Inclure les positions (start, end, loc), puis cliquez sur Copier ou sur Télécharger le JSON.

Les compteurs indiquent le nombre de Nœuds, la Profondeur maximale de l’arbre et le nombre d’Instructions de premier niveau.

Qu’est-ce qu’un arbre syntaxique abstrait ?

Avant qu’un moteur JavaScript, un linter ou un bundler puisse travailler sur votre code, il transforme le texte en un arbre de nœuds. Chaque nœud possède un type (VariableDeclaration, CallExpression, Identifier…) et des nœuds enfants rangés dans des propriétés nommées. Pour total += taille;, on obtient une ExpressionStatement dont l’expression est une AssignmentExpression d’opérateur +=, avec l’identifiant total à gauche (left) et taille à droite (right). Les parenthèses, les points-virgules et les commentaires disparaissent : l’arbre ne garde que la structure utile, d’où le qualificatif « abstrait ».

Cet outil s’appuie sur Acorn, l’analyseur léger et rapide utilisé par de nombreux outils JavaScript, réglé sur ecmaVersion: "latest". Le résultat suit ESTree, le format commun également produit par Espree (l’analyseur d’ESLint) et compris par la plupart des outils de transformation de code. Connaître le type exact des nœuds est indispensable pour écrire une règle ESLint, un codemod Babel ou jscodeshift, un plugin Prettier ou tout script d’analyse statique.

Positions, plages et export JSON

Chaque nœud porte start et end, les positions de son premier caractère et du caractère qui suit le dernier, ainsi qu’un objet loc avec les lignes (à partir de 1) et les colonnes. Dans le JSON, les colonnes commencent à 0, comme dans la sortie d’Acorn ; le panneau Nœud sélectionné les numérote à partir de 1, comme la plupart des éditeurs. Décochez Inclure les positions (start, end, loc) pour obtenir un JSON plus léger, plus facile à comparer entre deux versions d’un code.

Certaines valeurs n’ont pas d’équivalent en JSON : les expressions régulières littérales reçoivent "value": null (leur propriété regex conserve le motif et les drapeaux) et les BigInt sont écrits sous forme de chaînes, comme le recommande la spécification ESTree.

Limites et confidentialité

Le code est analysé dans votre navigateur, sans jamais être exécuté ni envoyé : l’analyseur se contente de lire le texte. La saisie est limitée à un million de caractères. Les très grands arbres sont affichés à la demande, par lots d’enfants, et un JSON trop volumineux pour l’aperçu reste téléchargeable. Le JSX et TypeScript ne sont pas du JavaScript standard : Acorn les signale comme des erreurs de syntaxe.