Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1083 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Use ASTExplorer.net

1:34 JavaScript lesson by

In this lesson we’ll look at the amazing open source tool ASTExplorer.net. We’ll learn how we can use it to learn about ASTs generated by different tools. We’ll also see how it can be used to help us write plugins for ESLint, Babel, and other tools. The noted ESTree specification can be found on GitHub.


egghead.io comment guidelines

Avatar
egghead.io

In this lesson we’ll look at the amazing open source tool ASTExplorer.net. We’ll learn how we can use it to learn about ASTs generated by different tools. We’ll also see how it can be used to help us write plugins for ESLint, Babel, and other tools. The noted ESTree specification can be found on GitHub.

The AST Explorer is an open-source project that allows you to see the abstract syntax tree representation for the source of several languages. On the left, we can type our code and on the right, we can look at the tree structure.

Because an AST is static, it can also be serialized into JSON, which we can view here. An AST is much larger than the code it represents. If we look at the tree view we can explore the AST. This auto-focus feature allows us to click on any part of our code and have that automatically scroll and focus that particular AST node into the tree view.

The AST is generated by a parser. There are many parsers for JavaScript and several of them are available in this tool. The generated AST will differ slightly from parser to parser. There is a specification for a particular AST structure called ES tree. Most modern parsers come close to following this specification. However, you will notice subtle differences in the AST representation of your code.

This gear icon allows us to configure the parser-specific options. If we click on one of the available transforms, we can see two more panes. The left side is our custom transform code and the right side is the result of our transform.

For Babel, the right side is the transformed code. Here all the identifiers have been reversed as a result of this custom Babel transform. Tips has turned to spit. For ESLint, the right side shows us all the violations as a result of this custom ESLint rule, which is disallowing template literals.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?