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
ASTs are not unique to JavaScript, but there is a robust ecosystem of JavaScript-specific AST tooling available. Much of this tooling also supports things like TypeScript as well. You may even be familiar with some of them, or already use them on a regular basis. Some examples of the JavaScript-specific tooling that either rely on, interface with, or expose ASTs include:
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.
Get unlimited access to Practical Abstract Syntax Trees, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[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.