Abstract Syntax Trees
Use ASTExplorer.net
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.
[00:00] 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.
[00:14] 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.
[00:38] 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.
[01:03] 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.
[01:16] 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.