Linting for product correctness
Inspired by this tweet thread by Rafael Mendiola, where he describes the idea of creating custom ESLint plugin to enforce rules that help developers adhere to a design system.
It culminates in an example
And here’s a good article on how to write custom ESLint plugins:
The team behind the Salesforce Lightning design system created an neat extension for VS Code:
SLDS Validator scans your markup, validates it against a database of guidelines/tips/gotchas/etc. extracted from the SLDS documentation, and offers suggestions on how to improve your code.
In this case, a “splash zone” refers to the parts of a system affected by a change to the system. If I edit a component, what other components are affected?
Some devs at Shopify have built a
yarn splash command that determines the splash zone of changes to their component library:
Their tools is conveniently open sourced: