1. React
  2. React Boston
  3. 2019
  4. Enforcing Your Design System with ESLint

Enforcing Your Design System with ESLint

Rafael Mendiola at React Boston 2019

Implementing a new design system on an existing application isn’t easy. Because updating an entire codebase in one go can be time consuming, we often like to think that we’ll update our codebase over time. But when development teams are very focused on building new features, it’s hard to remember to update old screens and pages. Codebases often end up with a mix of old and new design. Wouldn’t it be nice if we could use ESLint to remind us to update old code? In this lightning talk, I’ll talk about how to write ESLint rules to enforce your design system on your codebase. I’ll demonstrate how to write rules to: - Prevent using colors outside of your design system palette - Prevent using raw text and button components in favor of your design system components - Enforce that components in special directories (like pages or screens) follow the same UI patterns. This talk will be in the context of a React Native project, but it’s applicable to any React application.