Enforcing Your Design System with ESLint (⚡️)

on YouTube ↗18m

" summary

Demo shows actual ESLint rules and a published plugin that flag violations in real code and editors, not just theory. Uses ESLint + AST Explorer to implement rules that prevent using colors outside of your design system palette, forbid raw Text and legacy Button imports in favor of design system components, and enforce component patterns under pages or screens directories. Output appears as editor warnings/errors and a configurable npm plugin that runs in CI.

AI-written summary · about

" chapters (7)

1. 0:00Introduction
2. 0:30Shippi
3. 2:27Discipline
4. 4:29ESLint
5. 5:23AST Explorer
6. 9:00ESLint Plugin
7. 16:10Conclusion

" related talks

• 14mGetting Started with JavaScript Linter | What Is Linter?Kat Kmiotek · TestFlix 2023
• 29mCustom ESLint Rules with Angular SchematicsStanimira Vlaeva · AngularUP Experience 2020
• 25mWrite Perfect Code with Standard and ESLintFeross Aboukhadijeh · JSConf.Asia 2018
• 35mYou Could Lint MoreJosh Goldberg · revo.js 2023
• 49mESLint — more than just "extend"Denis Krasnovskiy · HolyJS 2022 Autumn
• 28mSetting Up ESLint and TypeScript for ReactJosh Goldberg · React Miami 2023
• 24mStatic Analysis: Don't Fear the Linter!Josh Goldberg · SeattleJS Conf 2023
• 31mDevelopment Standards: A Step-by-Step Guide to Implementing Them Without PainAleksandra Shinkevich · OdessaJS 2018