Course overview

Introduction

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

How to View Abstract Syntax Tree Code With AST Explorer

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

Environment setup

Understanding Abstract Syntax Trees (AST)

How to Generate a JavaScript AST With Babel Plugins

Traversing an AST With Babel Traverse

Add Type Safety and Prevent Runtime Errors With AST

Working with Abstract Syntax Trees

Practical code audits

How to Audit Your Code With AST Programming

How to Add a Component and Update an AST

When to Use Abstract Syntax Tree Tooling to Refactor at Scale

Code Audits

How to Mutate an AST and Automatically Replace Code Components

How to Create Codemods Using jscodeshift

Codemods

How to Ensure Codebase is Up to Date With Linting Rules

How to Use ESLint to Create AST Rules With Babel Traverse

Linting

node.js

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

Now that we have an understanding of what abstract syntax trees are, we can start generating ASTs from source code, and programmatically traverse through the different nodes in the tree.

When previously looking at AST Explorer, the parser option was set to 

, which means it can be installed and used to parse any source code string into an AST.

If you've worked with a frontend build pipeline, it's likely you've worked with 

 in some fashion. At a high level, babel is a JavaScript compiler, commonly used to transpile modern JavaScript syntax to compatible, but older JavaScript syntax. This allows early adoption of new syntax and features before there is sufficient browser support.

It has a robust plugin system that can be used to add support for many different syntaxes, for example:

Babel performs these transpilations by converting the source code into an AST, manipulates the nodes, and converts the manipulated AST back into source code. These plugins can extend and modify the parsing and generation of the AST.

 package wraps up most of this functionality in a single package with minimal configuration. Babel also exposes the different internal operations and functionality in a series of packages. Some of the packages, which we'll use and further explore in this lesson, include:

These lower-level packages can be used to create flexible, custom scripts to parse, generate, and manipulate ASTs.

 package to parse the previous code snippet into an AST.

First, create a directory, initialize a new 

# Create a new directory for the parser script
mkdir babel-parser-demo

# Change into the new directory
cd babel-parser-demo

# Initialize a new package.json file using the defaults
npm init -y

# Install the @babel/parser package as a dependency
npm i @babel/parser

 file to execute the parser on the source code.

const { parse } = require("@babel/parser");

const code = "2 + (4 * 10)";

const ast = parse(code);

console.log(ast);

---
title: How to Generate a JavaScript AST With Babel Plugins
description: Exploring tools to convert (or parse) JavaScript into a real AST
privateVideoUrl: "https://fullstack.wistia.com/medias/bo7g8wbocp"
---

# Generating a JavaScript AST

Now that we have an understanding of what abstract syntax trees are, we can start generating ASTs from source code, and programmatically traverse through the different nodes in the tree.

## Babel

When previously looking at AST Explorer, the parser option was set to `@babel/parser`. This is a package available on [npm](https://www.npmjs.com), which means it can be installed and used to parse any source code string into an AST.

If you've worked with a frontend build pipeline, it's likely you've worked with [babel](https://babeljs.io) in some fashion. At a high level, babel is a JavaScript compiler, commonly used to transpile modern JavaScript syntax to compatible, but older JavaScript syntax. This allows early adoption of new syntax and features before there is sufficient browser support.

It has a robust plugin system that can be used to add support for many different syntaxes, for example:

-   **[`babel-plugin-proposal-optional-chaining`](https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining)**: adds support for optional chaining, which is new syntax that isn't widely supported by browsers yet. This will transpile this new syntax into equivalent older syntax.
-   **[`babel-plugin-transform-react-jsx`](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx)**: adds support for [JSX](https://facebook.github.io/jsx), which is [XML](https://en.wikipedia.org/wiki/XML)-like, and not intended to be implemented by browsers. This plugin transpiles this syntax to an equivalent and supported syntax (functions and objects) before it can be run in the browser.
-   **[`babel-plugin-transform-typescript`](https://babeljs.io/docs/en/babel-plugin-transform-typescript)**: adds support for [TypeScript](https://www.typescriptlang.org), which adds static types. This plugin strips the types and does other transformations to transpile to valid JavaScript.
-   _[And many more...](https://babeljs.io/docs/en/plugins)_

Babel performs these transpilations by converting the source code into an AST, manipulates the nodes, and converts the manipulated AST back into source code. These plugins can extend and modify the parsing and generation of the AST.

The [`@babel/core`](https://babeljs.io/docs/en/babel-core) package wraps up most of this functionality in a single package with minimal configuration. Babel also exposes the different internal operations and functionality in a series of packages. Some of the packages, which we'll use and further explore in this lesson, include:

-   **[`@babel/parser`](https://babeljs.io/docs/en/babel-parser)**: parse a source code string into an AST.
-   **[`@babel/traverse`](https://babeljs.io/docs/en/babel-traverse)**: traverse different types of nodes within an AST.
-   **[`@babel/generator`](https://babeljs.io/docs/en/babel-generator)**: convert an AST back into a source code string.
-   **[`@babel/types`](https://babeljs.io/docs/en/babel-types)**: create new nodes to add _(or replace existing nodes)_ in an AST.

These lower-level packages can be used to create flexible, custom scripts to parse, generate, and manipulate ASTs.

## Parsing source code

To get started, we'll use the `@babel/parser` package to parse the previous code snippet into an AST.

```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.01/protected/src/example.js }
2 + (4 * 10)
```

First, create a directory, initialize a new `package.json` file, and add the `@babel/parser` dependency.

```bash
# Create a new directory for the parser script
mkdir babel-parser-demo

# Change into the new directory
cd babel-parser-demo

# Initialize a new package.json file using the defaults
npm init -y

# Install the @babel/parser package as a dependency
npm i @babel/parser
```

Next, create a `parser.js` file to execute the parser on the source code.

```javascript { actualFilename=./protected/babel-parser-demo/parser-00.js endChar=119 endLine=8 startChar=0 startLine=1 statedFilename=parser.js url=https&#x3A;//gitlab.com/fullstackio/books/practical-ast-and-codemods/module_02/lesson_02.01/protected/babel-parser-demo/parser-00.js }
const { parse } = require("@babel/parser");

const code = "2 + (4 * 10)";

const ast = parse(code);

console.log(ast);
```

Finally, execute the script with `node`.

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

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Practical Abstract Syntax Trees

Module 1: Introduction

Introduction:

Start Here

Introduction: (2:27)

Course overview

Module 2: Understanding Abstract Syntax Trees (AST)

Lesson 1: (5:55)

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

Lesson 2: (4:21)

How to View Abstract Syntax Tree Code With AST Explorer

Lesson 3: (1:46)

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

Lesson 4: (1:03)

Environment setup

Module 3: Working with Abstract Syntax Trees

Lesson 1: (6:29)

How to Generate a JavaScript AST With Babel Plugins

Lesson 2: (7:33)

Traversing an AST With Babel Traverse

Lesson 3: (9:31)

Add Type Safety and Prevent Runtime Errors With AST

Module 4: Code Audits

Lesson 1: (2:35)

Practical code audits

Lesson 2: (15:29)

How to Audit Your Code With AST Programming

Lesson 3: (2:32)

How to Add a Component and Update an AST

Lesson 4: (1:43)

When to Use Abstract Syntax Tree Tooling to Refactor at Scale

Module 5: Codemods

Lesson 1: (21:13)

How to Mutate an AST and Automatically Replace Code Components

Lesson 2: (10:03)

How to Create Codemods Using jscodeshift

Module 6: Linting

Lesson 1: (8:44)

How to Ensure Codebase is Up to Date With Linting Rules

Lesson 2: (5:31)

How to Use ESLint to Create AST Rules With Babel Traverse

How to Generate a JavaScript AST With Babel Plugins