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

An overview of the tooling available in the web frontend (JavaScript) ecosystem that rely on ASTs

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Practical Abstract Syntax Trees course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Practical Abstract Syntax Trees, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Practical Abstract Syntax Trees

  • [00:00 - 00:11] ASTs are not unique to JavaScript, but there is a robust ecosystem of JavaScript-specific AST tooling available. You may even be familiar with some of them, or already use some of them on a regular basis.

    [00:12 - 00:22] This lesson will quickly cover some examples of the JavaScript-specific tooling that either rely on interface with or expose ASTs. ESLint is a JavaScript code litter.

    [00:23 - 00:32] It provides a way to define rules for the code to follow. It relies on converting the source code into an AST, and then traversing the nodes to verify there are no violations.

    [00:33 - 00:40] This means if you're familiar with ASTs, it's possible to create custom linting rules. This will be covered in more depth later in the course.

    [00:41 - 00:47] Babel is a JavaScript compiler. It's commonly used to transpile new JavaScript features to backwards compatible JavaScript.

    [00:48 - 00:59] It provides several packages to work with code at different steps. For example, Babel parser converts a string of code into an AST, or Babel generator converts an AST back into a string of code.

    [01:00 - 01:05] This will also be covered in more depth later in the course. JS code shift is specialized tooling for transforming JavaScript.

    [01:06 - 01:15] This is primarily used for one-off code transformations when a breaking change is made across large code bases. For example, all the React code mods are built with JS code shift.

    [01:16 - 01:21] This will also be covered later in the course. Tursar, a JavaScript parser and compressor, or minifier.

    [01:22 - 01:28] Finally, prettier, an opinionated code formatter. It relies on ASTs for formatting source code.

    [01:29 - 01:39] This is only a short list of some of the tools available that work with ASTs in some way in the JavaScript ecosystem. The remainder of this course will dive into a few of these, looking at how they can be used in practice.

    [01:40 - 01:43] Many of the concepts can be carried from one tool to another since they're all based on ASTs.