what is ESLint
Creating an ESLint Plugin Directory
Using AST Explorer to Explore the code
Brief Introduction to AST
testing ESLint Rules
Using ESLint RuleTester
The problem with rules like these is that as they grow, even if they're written somewhere, it's hard to keep them straight in your brain and it becomes institutional or tribal knowledge.
Learn how to write an ESLINT Plugin from scratch.
In this tutorial I'll walk through all of the things I learned about to build an ESLint Plugin for the engineering group at Webflow.
With a monorepo architecture, especially one where you have frontend and backend code colocated, it's easy to accidentally import code from one to the other without any errors at development time and to see those errors in CI or worse, production!
We're going to use ESLint to check for these "dangerous imports".
In creating this plugin, you'll learn:
Th goal of this plugin is to notify developers when they've attempted to import or require a file in a certain path from a certain path.
As an example, let's say we have the following directory structure:
| --src ||