ESLint Plugin Twitch Core UI
Lint rules to improve working with Core UI.
Usage
Recommended Config
The easiest way to use these lint rules and stay up to date is with the pre-built "recommended" config. Just add the following to your eslint config:
extends: [
...
"plugin:twitch-core-ui/recommended",
],
If you want more control over which rules you enable, you can configure them manually:
plugins: [
...
"twitch-core-ui",
],
rules: {
...
"twitch-core-ui/no-styled-layout": "error",
},
Rules
no-deprecated-button-props
The Button
component has a lot of conditional pathways to render complex buttons with features such as purchase
price, statusAlertText
and statusAlertIcon
to enable hover warning behaviors, and state
which can change the "state" (a misnomer) of the button between 3 different presentations. Core UI is migrating these opinions into their own componentized buttons and this rule will ensure that these props are no longer in use.
no-deprecated-ref-handler-props
Many components accept either refHandler
or refDelegate
as a way to obtain a reference to the underlying DOM node. Some of these have been migrated to use the newer React Ref Forwarding pattern. This lint rule will warn against usage of the old refHandler
or refDelegate
props and provides an autofixer to replace them with the ref
prop.
no-styled-layout
StyledLayout
and InjectStyledLayout
have been deprecated and subsumed by
Layout
and InjectLayout
, respectively. This rule will warn against usage of
either of those components (or their associated prop types StyledLayoutProps
and InjectStyledLayoutProps
). It also has autofix capability to automatically
replace the deprecations with their replacements.