Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Use ASTExplorer.net

    Kent C. DoddsKent C. Dodds

    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.

    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss