Course overview

Introduction

Understand the basics of an AST and how it relates to real-world code

What is an Abstract Syntax Tree? Visualizing Code Like a Compiler

Looking at an example code snippet and how it relates to the resulting AST

How to View Abstract Syntax Tree Code With AST Explorer

An overview of the tooling available in the web frontend (JavaScript) ecosystem that rely on ASTs

The Best JavaScript AST Tools - ESLint, Babel, Terser, and More

A quick overview of the basic environment setup used throughout this course

Environment setup

Understanding Abstract Syntax Trees (AST)

Exploring tools to convert (or parse) JavaScript into a real AST

How to Generate a JavaScript AST With Babel Plugins

Programmatically traverse an AST and visit arbitrary nodes

Traversing an AST With Babel Traverse

Add Type Safety and Prevent Runtime Errors With AST

Working with Abstract Syntax Trees

A practical example of needing to perform a code audit (static analysis) to understand the current state of a codebase

Practical code audits

Create a custom script to audit a codebase

How to Audit Your Code With AST Programming

Introduce a shared Button component to replace all existing button elements

How to Add a Component and Update an AST

A rough formula to determine when to use AST-based tooling

When to Use Abstract Syntax Tree Tooling to Refactor at Scale

Code Audits

Transforming code in place by mutating an AST

How to Mutate an AST and Automatically Replace Code Components

Using jscodeshift to make the same code transformations with less boilerplate

How to Create Codemods Using jscodeshift

Create tests for jscodeshift transforms for a faster feedback loop

How to Unit Test jscodeshift Transforms With ts-jest

Codemods

Implement a linting rule to prevent the code we just transformed from being reintroduced in the future

How to Ensure Codebase is Up to Date With Linting Rules

Use ESLint to create the same linting rule for the code with less boilerplate

How to Use ESLint to Create AST Rules With Babel Traverse

Testing custom ESLint linting rules to verify they work as expected

How to Test Custom ESLint Linting Rules With AST

Linting

In this course, we'll start with the fundamentals of abstract syntax trees (ASTs) and learn the basic mental models. This general AST knowledge can be translated to almost any tool that works with ASTs.

## Why this course?

Understanding and using ASTs unlocks the ability to make sweeping changes in a safe and reliable way in any size codebase.

## Course topics

Throughout this course, we'll have converted source code into ASTs, traversed, mutated, and generated ASTs. With these concepts we'll then explore several practical applications including things like code audits (static analysis), code transformations (codemods), and linting.

### Module 1

We'll learn the fundamentals of abstract syntax trees. 

- What is an AST?
- How to explore an AST
- Examples of JavaScript tools that work with ASTs

### Module 2

We'll learn how to work with ASTs.

- How to turn code into an AST
- How to programmatically navigate any AST 
- How to leverage TypeScript to prevent runtime errors

### Module 3

We'll learn how to statically analyze, or "audit" code to understand the state of the codebase using abstract syntax trees.

- An introduction to an example codebase and refactor
- Understanding the state of the current codebase
- When to use an AST-based tool versus doing something manually

### Module 4

We'll learn how to transform, or "codemod" code from one state to another using abstract syntax trees.

- How to make changes to an AST
- How to change ASTs with [jscodeshift](https://github.com/facebook/jscodeshift)
- How to test a code transform

### Module 5

We'll learn how to write rules, or "lint" code using abstract syntax trees.

- How to create rules for code
- How to create custom rules with [ESLint](https://eslint.org)
- How to test a rule

In this course, you'll learn the fundamentals of abstract syntax trees, what they are, how they work, and dive into several practical use cases of abstract syntax trees to maintain a JavaScript codebase.

Practical Abstract Syntax Trees

JavaScript tools that work with abstract syntax trees

How to parse, traverse, and generate abstract syntax trees

Practical skill set for maintaining large JavaScript codebases

Manually exploring an AST is a helpful exercise in understanding the relevant subtree and its nodes which represent a given piece of code. Understanding the relevant nodes is the first step to being able to automatically or programmatically traverse an AST.

 is one of the simplest ways to begin exploring real ASTs. It provides a UI on top of many tools, and a way to interactively explore ASTs. This helps make ASTs more digestible, by highlighting the relationship between the source code and specific nodes of the AST.

 and paste in the example snippet of code in the code pane on the left.

There are a few views and settings AST Explorer provides. First, there are the 

 settings. For this course, the language can always be set to 

 because all of the example code we're parsing is JavaScript.

 option will need to be changed throughout the course depending on the exact tool being looked at. For now, using 

 is a good default, and many of the first lessons will use this as the parser. This setting controls which parser is used to generate the AST. The final AST can differ depending on which parser is selected.

---
title: How to View Abstract Syntax Tree Code With AST Explorer
description: Looking at an example code snippet and how it relates to the resulting AST
privateVideoUrl: "https://fullstack.wistia.com/medias/bfyntxhslo"
code: https://gitlab.com/fullstackio/books/newline-course-apps/spencer-miskoviak-practical-abstract-syntax-trees-app/-/tree/main/code/module_02/lesson_02.02/App/src
---

# Exploring an Abstract Syntax Tree

Manually exploring an AST is a helpful exercise in understanding the relevant subtree and its nodes which represent a given piece of code. Understanding the relevant nodes is the first step to being able to automatically or programmatically traverse an AST.

## AST Explorer

[AST Explorer](https://astexplorer.net) is one of the simplest ways to begin exploring real ASTs. It provides a UI on top of many tools, and a way to interactively explore ASTs. This helps make ASTs more digestible, by highlighting the relationship between the source code and specific nodes of the AST.

![Screenshot of astexplorer.net](https://d2uusema5elisf.cloudfront.net/courses/practical-abstract-syntax-trees/module_02/lesson_02.02/public/assets/ast-explorer-net.png)

To give this a try, go to [AST Explorer](https://astexplorer.net) and paste in the example snippet of code in the code pane on the left.

```javascript { actualFilename=./protected/src/example.js endChar=12 endLine=1 startChar=0 startLine=1 statedFilename=example-code.js url=https&#x3A;//gitlab.com/fullstackio/books/practical-ast-and-codemods/module_02/lesson_02.02/protected/src/example.js }
2 + (4 * 10)
```

There are a few views and settings AST Explorer provides. First, there are the **language** and **parser** settings. For this course, the language can always be set to **JavaScript** because all of the example code we're parsing is JavaScript.

![Screenshot of astexplorer.net language and parser](https://d2uusema5elisf.cloudfront.net/courses/practical-abstract-syntax-trees/module_02/lesson_02.02/public/assets/ast-explorer-net-language-parser.png)

The **parser** option will need to be changed throughout the course depending on the exact tool being looked at. For now, using **`@babel/parser`** is a good default, and many of the first lessons will use this as the parser. This setting controls which parser is used to generate the AST. The final AST can differ depending on which parser is selected.

![Screenshot of astexplorer.net parsers](https://d2uusema5elisf.cloudfront.net/courses/practical-abstract-syntax-trees/module_02/lesson_02.02/public/assets/ast-explorer-net-parsers.png)

Spencer Miskoviak

Manually exploring an AST is a helpful exercise in understanding the relevant

nodes which represent a given piece of code.

Understanding the relevant nodes is the first step to being able to

AST Explorer is one of the simplest ways to begin exploring real ASTs.

It provides a UI on top of many tools in a way to interactively explore ASTs.

This helps make ASTs more digestible by highlighting the relationship between

To give this a try, we'll go to ASTexplore.net and put in the same piece of

There are a few views in settings AST Explorer provides in the top menu.

For this course, the language can always be set to JavaScript because all of

The parser option will need to be changed throughout the course depending on

For now, using Babel parser is a good default and many of the first lessons

This setting controls which parser is used to generate the AST.

The final AST can differ depending on which parser is selected.

Remember to switch the parser to match the tool being used in later lessons.

Otherwise the generated tree in AST Explorer can have subtle and confusing

Next to this parser option is a gear icon.

Clicking this controls the options for the selected parser.

For example, pasting in something like TypeScript code would require enabling

This is where any relevant code can be typed or pasted.

Typically, it's easiest to keep the code as short as possible to keep the

The resulting AST for the code snippet will be generated invisible on the right

Each node in the tree can be expanded or collapsed.

Arguably the best feature is the ability to click on the source code to

Clicking the node in the tree view will also highlight the relevant code in the

For example, clicking 4 in the code editor will highlight the numeric literal

Or hovering over the numeric literal node with a value of 10 in the tree view

Alternatively, the entire generated tree can be viewed aesthetic JSON by togg

The tree view also exposes several other settings.

For example, the location data which defines the lines and columns where the

appeared in the source isn't frequently used.

The hide location data option can be enabled to hide the state in the nodes to

Hide entity keys will hide keys with undefined values.

These settings aren't necessary but can make it easier to focus on the

Take a moment to explore ASTs generated for other code.

For example, maybe paste a snippet of code from one of your projects.

Or consider pasting a snippet of code from an open source repo.

Otherwise, maybe try different types of syntax such as spread syntax, knowledge

AST explores a helpful tool when trying to understand the AST for a given piece

Keep it handy to paste in any pieces of code that come up through the course

We now have a base understanding of what an AST is and how to manually explore

The next lesson will cover some of the tooling that exists in the JavaScript