Professional Trainer
Code Transformation and Linting with ASTs
3 hours, 28 minutes
CC
Course Description
Learn Abstract Syntax Trees to help keep track of stylistic code changes, reveal logical problems, and spot domain-specific issues to prevent bugs from entering your codebase. By coding along with Kent in this course, you’ll learn: What Abstract Syntax Trees are, the tools available, and how to write custom ESLint rules, Babel plugins and Codemods with ASTs. This course is for experienced JavaScript developers who want to gain a deep understanding of Abstract Syntax Trees to solve frustrating problems with their codebase and improve their development experience writing JavaScript applications.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: July 11, 2017
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Code Transformation and Linting with Abstract Syntax Trees
Section Duration: 3 minutes
Kent C. Dodds introduces his Code Transformation and Linting course. He also reviews the course agenda and setup for coding exercises.
Abstract Syntax Trees
Section Duration: 38 minutes
Kent discusses the importance of Abstract Syntax Trees (AST) by examining examples where they are used: plugins for Babel and ESLint as well as within Codemods.
Through visual and online demonstrations, Kent discusses what an Abstract Syntax Tree (AST) is. AST is a visual tree representation of the abstract syntax of programming code. AST's can help aid in learning how programming works by quickly seeing the progression of code through a program.
To demonstrate the power of AST, Kent will review three use cases in the course: building out Babel and ESLint plugins, and then showing how to use AST with Codemods. Using the AST Explorer tool, Kent starts with an ESLint example to show how to traverse AST so that programmers can track stylistic code, logical problems, or domain specific issues to keep bugs from entering the codebase.
ESLint Plugin and AST
Section Duration: 1 hour, 15 minutes
In this challenge, students write an ESLint plugin.
Kent walks through the solution to Challenge 1.
In this challenge, students write a plugin that integrates new methods and functions that past validation.
Kent walks through the solution to Challenge 2 and takes questions from students.
In this challenge, students learn about using the JSON schema property.
Kent walks through the solution to Challenge 3.
In this challenge, students learn how to create plugins for edge cases.
Kent walks through the solution to Challenge 4 and takes questions from students.
In this challenge, students learn how to incorporate the ability to fix bad code automatically.
Kent walks through the solution to Challenge 5.
Babel Plugin and AST
Section Duration: 51 minutes
In showing how to set up working with Abstract Syntax Trees in Babel, Kent demonstrates the differences and similarities between working with ESLint.
In this challenge, students use a snapshot of transpired code.
Kent walks through the solution to Challenge 6.
In this challenge, students continue to build out the plugin by attaching a prefix to a function.
Kent walks through the solution to Challenge 7.
In this challenge, students add support for arrow function expression.
Kent walks through the solution to Challenge 8.
In this challenge, students add support for divide function.
Kent walks through the solution to Challenge 9.
Codemods and AST
Section Duration: 38 minutes
Kent reviews integrating Codemod, a library used to refactor code which can be partially automated, with AST.
In this challenge, students update code to swap out jQuery with vanilla JavaScript.
Kent walks through the solution to Challenge 10.
In this challenge, students continue to work to swap out more jQuery with vanilla JavaScript functions.
Kent walks through the solution to Challenge 11.
Wrapping Up Code Transformation and Linting with Abstract Syntax Trees
Section Duration:
Kent wraps up the Wrapping Up Code Transformation and Linting with Abstract Syntax Trees course with a list of resources for further learning and thanks to the class.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops