Now more then ever, you need to master custom ESLint rules
This title could be clearer and more informative.Try out Clickbait Shieldfor free (5 uses left this month).
A hands-on guide to writing custom ESLint rules by building one that catches the derived state antipattern in React's useEffect. Covers how ESLint parses JavaScript into an Abstract Syntax Tree (AST), how rules work as visitor functions on AST nodes, and how to use AST Explorer to prototype rules. Includes full code for a no-derived-state-in-effect rule, how to wire it up as a local plugin in ESLint's flat config, testing with RuleTester, adding auto-fix, and three additional practical rules. Also covers the no-restricted-syntax shortcut for simple pattern matching without a full plugin, and how lint rules complement AI coding assistants as hard enforcement mechanisms.
Table of contents
Your code is a tree 🔗How ESLint actually works 🔗AST Explorer changed everything 🔗Building the real rule 🔗Turning it into a local plugin 🔗Testing the rule 🔗Adding auto-fix 🔗Rules worth writing 🔗The plugin that already exists 🔗Why you should build one anyway 🔗Teaching your AI assistant 🔗The five-minute version 🔗Get started 🔗References 🔗Sort: