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.