T
ast compiler eslint babel typescript parsing

Guide AST Explorer et Visualiseur : Comprendre les Arbres de Syntaxe Abstraite

Apprenez comment les Arbres de Syntaxe Abstraite (AST) alimentent les compilateurs, les linters et les formateurs. Découvrez des outils pour visualiser les AST JS, TS et CSS comme ESTree et PostCSS.

2026-04-13

Guide AST Explorer et Visualiseur : Comprendre les Arbres de Syntaxe Abstraite

Vous êtes-vous déjà demandé comment votre éditeur de code sait quand vous avez une erreur de syntaxe, ou comment ESLint peut corriger automatiquement votre code ? La réponse réside dans l'Arbre de Syntaxe Abstraite (AST). Un AST est une représentation sous forme d'arbre de la structure de votre code source, et c'est le fondement des outils de développement web modernes comme Babel, Prettier et TypeScript.

1. Qu'est-ce qu'un Arbre de Syntaxe Abstraite (AST) ?

Lorsqu'un compilateur ou un outil lit votre code source, il ne le traite pas simplement comme une longue chaîne de texte. Au lieu de cela, il passe par plusieurs phases :

  1. Analyse Lexicale (Tokenizing) : Découpe le code en "tokens" (ex: mots-clés, identifiants, opérateurs).
  2. Analyse Syntaxique (Parsing) : Organise ces tokens dans une structure d'arbre qui reflète la grammaire du langage.

L'AST qui en résulte élimine les détails inutiles comme les commentaires, les espaces blancs et les points-virgules (d'où le terme "abstrait") et se concentre sur la relation structurelle entre les différentes parties du code.

2. Pourquoi l'AST est-il utile pour les compilateurs, les linters et les formateurs ?

Les AST sont le langage universel pour les outils qui analysent ou transforment le code :

  • Compilateurs (ex: Babel, TypeScript) : Transforment un AST d'une version (comme ES6) vers une autre (comme ES5) avant de générer le JavaScript final.
  • Linters (ex: ESLint) : Parcourent l'AST pour trouver des motifs qui violent les règles (ex: "no-unused-vars") et peuvent même modifier l'arbre pour "corriger automatiquement" les erreurs.
  • Formateurs (ex: Prettier) : Analysent votre code dans un AST puis le régénèrent à partir de zéro selon un ensemble de règles cohérentes, ignorant votre formatage d'origine.

3. Visualisation de l'AST pour JS, TS et CSS

Différents langages utilisent différentes spécifications d'AST :

  • JavaScript/TypeScript (ESTree) : La plupart des outils JS suivent la spécification ESTree. Dans cet arbre, une déclaration de variable est représentée comme un nœud VariableDeclaration, qui contient des nœuds VariableDeclarator.
  • CSS (PostCSS/CSSTree) : Le CSS est également analysé dans un AST. Des outils comme PostCSS l'utilisent pour gérer les préfixes des fournisseurs, les variables et l'imbrication.

4. Comment utiliser un AST Explorer

La meilleure façon de comprendre un AST est de le voir en action. AST Explorer (astexplorer.net) est un outil en ligne essentiel pour les développeurs.

  1. Collez votre code : Placez votre extrait dans le volet de gauche.
  2. Choisissez votre parseur : Sélectionnez le langage (JavaScript, CSS, JSON, etc.) et le parseur (ex: @babel/parser, typescript).
  3. Inspectez l'arbre : Cliquez sur différentes parties de votre code pour voir le nœud correspondant dans la structure d'arbre à droite.

5. Outils courants alimentés par les AST

  • Babel : La norme de l'industrie pour la transpilation du JavaScript.
  • ESLint : Le linter le plus populaire, qui utilise le parseur espree pour créer un AST.
  • Prettier : Un formateur de code opiniâtre qui utilise plusieurs parseurs (Babel, TypeScript, Flow) pour construire des AST.
  • SWC : Un compilateur rapide basé sur Rust qui utilise également des AST pour la transformation.

FAQ (Foire Aux Questions)

Q : Qu'est-ce qu'un parseur ?

A : Un parseur est le logiciel qui prend le code source en entrée et produit un AST en sortie. Des exemples incluent Acorn, Babel Parser et Esprima.

Q : Quelle est la différence entre un Source Map et un AST ?

A : Un AST est une représentation structurelle utilisée pour l'analyse et la transformation. Un Source Map est un fichier de correspondance qui indique au navigateur comment le code transformé/minifié se rapporte au code source original pour faciliter le débogage.

Q : Puis-je construire mon propre linter en utilisant l'AST ?

A : Oui ! Des outils comme ESLint vous permettent d'écrire des règles personnalisées. Vous définissez une fonction de visiteur qui "visite" des types de nœuds spécifiques dans l'AST et signale des erreurs lorsque certaines conditions sont remplies.

Sur Tool3M

  • Minificateur de Code : Voyez comment le code est compressé en transformant et en simplifiant l'AST.
  • Formateur JSON : Visualisez votre structure de données JSON comme un arbre propre et interactif.
Retour au blog