Implementing design systems is a big trend in software development right now. But how can we enforce them?
![](https://pbs.twimg.com/media/EFPKxMXXsAAXi2r.jpg)
Shippy is our baby. Our Minimum Valuable Product. Shippy's job is to ship, and make our customers happy. Our task is to nurture Shippy, and raise it from an MVP to a Minimum Lovable Product.
![](https://pbs.twimg.com/media/EFPLY8lX4AA2CEX.jpg)
How can small teams stick to a design system? Well, we can use existing tools. We already have @geteslint.
![](https://pbs.twimg.com/media/EFPPZXdXsAAjPi4.jpg)
Can we use ESLint to check for Product Correctness??
![](https://pbs.twimg.com/media/EFPPxmLWsAArJZa.jpg)
Building an ESLint plugin is not that bad. There's a good tutorial by @FlexportEng on how to write your own plugin. flexport.engineering/writing-custom…
![](https://pbs.twimg.com/media/EFPQcjDXsAAygXq.jpg)
For a long time I thought that ASTs were for super nerds. But it's actually not that bad. It's actually quite simple to understand. Play around with astexplorer.net
![](https://pbs.twimg.com/media/EFPRcRsXYAE_arZ.jpg)
(It's still in the experimental stages, but try it out!)
![](https://pbs.twimg.com/media/EFPR05SWsAEOs2Y.jpg)
In a codebase that's iterating on design quickly, we might have a lot of instances of hardcoded colors. For example, line 14:
`backgroundColor: "#07313A",`
![](https://pbs.twimg.com/media/EFPS4E6XYAMuH6I.jpg)
(js only)
![](https://pbs.twimg.com/media/EFPUSkhX4AU4kLU.jpg)
We might have deprecated components from an old design...
We might have forbidden platform components, where we want to use our Design System instead...
![](https://pbs.twimg.com/media/EFPVTgTWwAA-UhU.jpg)
You can configure that rule by adding a `settings.design-system` section to your eslintrc file, and you can specify which imports you want forbidden. You can deprecate old components!
![](https://pbs.twimg.com/media/EFPXAG9XUAYxBR2.jpg)
It's like a list of things we need to do to make our product consistent 😇
![](https://pbs.twimg.com/media/EFPXUFZW4AEDNZZ.jpg)
Eventually I'll be able to change this to use globs. Maybe you can help me?)
![](https://pbs.twimg.com/media/EFPYBrkXoAE3Jxr.jpg)
Because I'm mostly a React Native dev, there might be some things I missed for React Web.
But you can help me improve it here:
github.com/dslounge/eslin…
Make sure to help #Shippy grow up happy and healthy!
![](https://pbs.twimg.com/media/EFPZnEXXkAAbt1K.jpg)