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

 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"
code: https://gitlab.com/fullstackio/books/newline-course-apps/spencer-miskoviak-practical-abstract-syntax-trees-app/-/tree/main/code/module_06/lesson_06.02/App/flash-cards?ref_type=heads
---

# 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_06/lesson_06.02/protected/flash-cards/package.json#L22 }
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "no-button-element": 2
    }
  },
```

Spencer Miskoviak

ES lint brings many of the same benefits for linting that JS code shift brought

in terms of reduced setup and configuration.

A standard solution also means that more generic ES lint rules can be shared

bases, which reduces the need for custom linting rules in the first place.

ES lint includes a large set of these linting rules by default.

It also makes it easy to include rules for different use cases.

For example, there's the ES lint React plugin package which includes a large

There are many plugins like this for all sorts of libraries, as well as

The rules included with ES lint, in combination with many of the rules provided

can cover many of the common needs in a code base.

However, a large code base is constantly evolving, which usually means specific

This is one area that custom linting rules are useful.

Let's start by opening the flashcards code base.

As mentioned in an earlier lesson, the flash app was built using create react

It takes care of much of the standard boilerplate in configuration for a

The default create react app ES lint configuration can be updated using the

options by updating the ES lint config property in the package.json file.

When working on a project that doesn't have ES lint already set up and

official documentation for getting started can be followed.

The simplest approach for creating custom rules with ES lint is to use runtime

To get started, we'll create a new ES lint rules directory within the existing

Then we'll create a new file named noButtonElement.js in this ES lint rules

ES lint will then allow us to pass the custom option to specify where these

We can update the ES lint configuration to enable this custom rule.

Note that the file name must match this rule name.

And finally, we can add the boilerplate for this rule.

ES lint expects the export to be an object with a few keys defined.

The first key is meta, which defines metadata for this rule.

In this case, we're only going to define the type property, which defines the

It can be either problem, suggestion, or layout.

The next key we need to define is create, which is a function that returns an

It also passes in a context parameter, which provides several utilities for

To start out, let's traverse all JSX opening elements like the previous scripts

We can then use the report function on the context object to report a message

This file now defines a rule which exports an object with some metadata and a

to visit specific types of nodes in an AST.

This file is an ES lint specific configuration, but the object with visitors

of the previous scripts that use Babel traverse.

It's still missing many of the same constraints, so this will produce many lint

Let's switch to our terminal and try running ES lint in the flashcards

We can see that this triggered many linting errors because we're targeting

Let's switch back to our editor and start by pasting in the logic from the

We can also reuse the exact same message from the previous script.

The last change we need to make is converting string literal to literal.

This is because ES lint uses a different parser instead of Babel.

This script is now equivalent to the custom linter.

One difference is using the context.report function to report the violation.

ES lint passes the context object to the create function which provides helpers

ES lint will then handle all of the grouping in other logic to surface the

Let's again add a violation in the landing page component with a button element

has a button class name that should instead be a button component.

We can then switch back to our terminal and rerun ES lint.

We can see that it produces the same linting error from the previous custom l

ES lint removed much of the boilerplate in dependency management.

With minimal setup we were able to get a custom linting rule working.