Course overview

Introduction

What is an AST?

Exploring an AST

JavaScript AST ecosystem

Environment setup

Understanding Abstract Syntax Trees (AST)

Generating a JavaScript AST

Traversing an AST

Preventing Runtime Errors (with Types)

Working with Abstract Syntax Trees

Practical code audits

Performing a code audit

Adding the Button component

When to use AST-based tooling

Code Audits

Mutating an AST

Using jscodeshift

Testing a transform

Codemods

Creating rules for code

Using ESLint

Testing custom linting rules

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

In this module we're going to start looking at a practical application of ASTs when needing to maintain and refactor a codebase. Specifically, we want to create a new 

 component that will handle all of the button styles and functionality. It will make buttons consistent and allow making global button changes in a single component. However, there are already many usages of 

This module will cover performing a code audit to understand the existing usages of 

 component that handles all existing functionality.

The following modules will cover how to transform those existing 

 components, and then how to prevent future usages of 

For the remainder of this course we'll work with the codebase of a small sample app. We can then apply AST-based tooling to refactor it.

---
title: Practical code audits
description: A practical example of needing to perform a code audit (static analysis) to understand the current state of a codebase
privateVideoUrl: "https://fullstack.wistia.com/medias/89o49d6aon"
---

# Practical code audits

In this module we're going to start looking at a practical application of ASTs when needing to maintain and refactor a codebase. Specifically, we want to create a new `Button` component that will handle all of the button styles and functionality. It will make buttons consistent and allow making global button changes in a single component. However, there are already many usages of `button` elements. 

This module will cover performing a code audit to understand the existing usages of `button` elements so we can create a `Button` component that handles all existing functionality.

The following modules will cover how to transform those existing `button` elements into `Button` components, and then how to prevent future usages of `button` elements.

For the remainder of this course we'll work with the codebase of a small sample app. We can then apply AST-based tooling to refactor it.

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

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

Welcome: Introduction

Introduction:

Start Here

Introduction: (2:27)

Course overview

Module 0: Understanding Abstract Syntax Trees (AST)

Lesson 1: (5:55)

What is an AST?

Lesson 2: (4:21)

Exploring an AST

Lesson 3: (1:46)

JavaScript AST ecosystem

Lesson 4: (1:03)

Environment setup

Module 1: Working with Abstract Syntax Trees

Lesson 1: (6:29)

Generating a JavaScript AST

Lesson 2: (7:33)

Traversing an AST

Lesson 3: (9:31)

Preventing Runtime Errors (with Types)

Module 2: Code Audits

Lesson 1: (2:35)

Practical code audits

Lesson 2: (15:29)

Performing a code audit

Lesson 3: (2:32)

Adding the Button component

Lesson 4: (1:43)

When to use AST-based tooling

Module 3: Codemods

Lesson 1: (21:13)

Mutating an AST

Lesson 2: (10:03)

Using jscodeshift

Lesson 3: (5:55)

Testing a transform

Module 4: Linting

Lesson 1: (8:44)

Creating rules for code

Lesson 2: (5:31)

Using ESLint

Lesson 3: (4:31)

Testing custom linting rules

Practical code audits

Intro to a sample codebase#