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

---
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
    }
  },
```

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