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

 has many of the same benefits for linting that jscodeshift brought to transforms in terms of reduced setup and configuration. A standard solution also means that more generic ESLint rules can be shared across many codebases, which reduces the need for custom linting rules in the first place.

. It also makes it easy to include rules for different use cases. For example, the 

 package includes a large set of rules for a codebase using React. There are many plugins like this for all sorts of libraries, as well as encouraging good practices for things like accessibility.

The rules included with ESLint, in combination with many of the rules provided by plugins, can cover many of the common needs in a codebase. However, a large codebase is constantly evolving, which usually means specific patterns become outdated or deprecated. This is one area custom linting rules are useful.

The Flash app was built using Create React App. It takes care of much of the standard boilerplate and configurations for a project, including ESLint.

The default Create React App ESLint configuration 

"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
}

When working on a project that doesn't have ESLint set up and configured, the 

official documentation for getting started

The simplest approach for creating custom rules with ESLint is to use 

 directory within the project for custom rules.

# Create a new directory in the flash-cards project
mkdir eslint-rules

 option to specify where the custom rules are defined.

---
title: How to Use ESLint to Create AST Rules With Babel Traverse
description: Use ESLint to create the same linting rule for the code with less boilerplate
privateVideoUrl: "https://fullstack.wistia.com/medias/oejwo9zx2y"
---

# Using ESLint

[ESLint](https://eslint.org) has many of the same benefits for linting that jscodeshift brought to transforms in terms of reduced setup and configuration. A standard solution also means that more generic ESLint rules can be shared across many codebases, which reduces the need for custom linting rules in the first place.

ESLint [includes a large set of rules by default](https://eslint.org/docs/rules/). It also makes it easy to include rules for different use cases. For example, the [`eslint-plugin-react`](https://github.com/yannickcr/eslint-plugin-react) package includes a large set of rules for a codebase using React. There are many plugins like this for all sorts of libraries, as well as encouraging good practices for things like accessibility.

The rules included with ESLint, in combination with many of the rules provided by plugins, can cover many of the common needs in a codebase. However, a large codebase is constantly evolving, which usually means specific patterns become outdated or deprecated. This is one area custom linting rules are useful.

## Getting started

The Flash app was built using Create React App. It takes care of much of the standard boilerplate and configurations for a project, including ESLint.

The default Create React App ESLint configuration [can be updated](https://create-react-app.dev/docs/setting-up-your-editor/#extending-or-replacing-the-default-eslint-config) using the standard [ESLint configuration](https://eslint.org/docs/user-guide/configuring/configuration-files#using-configuration-files) options by updating the `eslintConfig` property in the `package.json` file.

```json
"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
}
```

:::tip

When working on a project that doesn't have ESLint set up and configured, the [official documentation for getting started](https://eslint.org/docs/user-guide/getting-started) can be followed.

:::

The simplest approach for creating custom rules with ESLint is to use ["runtime rules"](https://eslint.org/docs/developer-guide/working-with-rules#runtime-rules). To get started, create a new `eslint-rules` directory within the project for custom rules.

```bash
# Create a new directory in the flash-cards project
mkdir eslint-rules
```

Then, create a new file named `no-button-element.js` in this `eslint-rules` directory. ESLint allows passing the `--rulesdir` option to specify where the custom rules are defined.

Now, the configuration can be updated to enable this custom rule. Note that the file name matches the rule name.

```json { actualFilename=./protected/flash-cards/package.json endLine=30 startLine=22 statedFilename=package.json url=https&#x3A;//gitlab.com/fullstackio/books/practical-ast-and-codemods/module_05/lesson_05.02/protected/flash-cards/package.json#L22 }
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "no-button-element": 2
    }
  },
```

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

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 Use ESLint to Create AST Rules With Babel Traverse