eslint-plugin-twitch-core-ui

24.0.1 verified Fri May 01 auth: no javascript

An ESLint plugin providing custom lint rules for Twitch's Core UI library, version 24.0.1. It includes auto-fixable rules to enforce best practices and migrations within the Core UI component ecosystem. Key rules cover deprecation of legacy Button props, ref handler patterns, and styled layout components. The plugin ships with a recommended config for easy setup. Release cadence is tied to Core UI updates.

Common errors

error ESLint: Failed to load plugin 'twitch-core-ui' declared in '.eslintrc' ↓

cause Plugin not installed as a dev dependency.

fix

Run npm install --save-dev eslint-plugin-twitch-core-ui

error Definition for rule 'twitch-core-ui/no-deprecated-button-props' was not found ↓

cause The rule name is misspelled or not loaded due to incorrect plugin reference.

fix

Check package name in plugins array, e.g., plugins: ['twitch-core-ui']

Warnings

breaking Rule no-deprecated-ref-handler-props may cause false positives for components not yet migrated. ↓

fix Add eslint-disable comments for specific lines or migrate the component to use ref prop.

deprecated StyledLayout and InjectStyledLayout are deprecated in Core UI; the lint rule enforces migration. ↓

fix Replace with Layout and InjectLayout respectively, autofix available.

gotcha The recommended config may enable rules not yet relevant to your project; review before extending. ↓

fix Instead of using recommended config, manually enable desired rules.

Install

npm install eslint-plugin-twitch-core-ui

yarn add eslint-plugin-twitch-core-ui

pnpm add eslint-plugin-twitch-core-ui

Imports

plugin

wrong

const plugin = require('eslint-plugin-twitch-core-ui')

correct

import plugin from 'eslint-plugin-twitch-core-ui'

ESM default import works with ESLint's plugin resolution.

rules

wrong

const { rules } = require('eslint-plugin-twitch-core-ui')

correct

import { rules } from 'eslint-plugin-twitch-core-ui'

Named import for rules object, but typically you use the plugin directly.

configs

wrong

const { configs } = require('eslint-plugin-twitch-core-ui')

correct

import { configs } from 'eslint-plugin-twitch-core-ui'

Access pre-built configs like 'recommended' via configs.recommended.

Quickstart

Shows how to enable the plugin using the recommended config or manually in an ESLint config file.

// .eslintrc.js
module.exports = {
  extends: [
    'plugin:twitch-core-ui/recommended',
  ],
  rules: {
    // Override or add rules manually
    'twitch-core-ui/no-styled-layout': 'error',
  },
};