eslint-plugin-storybook

10.3.5 verified Sat Apr 25 auth: no javascript

ESLint plugin providing best-practice rules for writing Storybook stories. Current stable version is 10.3.5, released as part of the Storybook monorepo. The plugin helps enforce conventions like story/component name matching (story-exports), default export structure (default-exports), and hierarchy customization (hierarchy-separator). It is actively maintained alongside Storybook itself, with frequent alpha releases. Key differentiators: first-party support directly from Storybook maintainers, automatic rule suggestions, and integration with Storybook's CSF (Component Story Format). Alternative: community plugins like eslint-plugin-stories exist but are less comprehensive.

Common errors

error Cannot find module 'eslint-plugin-storybook' ↓

cause Package not installed or wrong version.

fix

npm install --save-dev eslint-plugin-storybook

error ESLint Error: Configuration for rule 'storybook/story-exports' is invalid ↓

cause Rule is not configured or plugin is not loaded.

fix

Add 'plugins: ["storybook"]' to your ESLint config.

error TypeError: plugin.configs.recommended is not iterable ↓

cause Using flat config with an older version of the plugin.

fix

Upgrade eslint-plugin-storybook to >=0.9.0 which supports flat config.

Warnings

deprecated Rule 'component-name-default-exports' has been renamed to 'default-exports'. ↓

fix Use 'storybook/default-exports' instead.

breaking ESLint 9 flat config support requires using the 'configs' export. ↓

fix Use import plugin from 'eslint-plugin-storybook'; export default [...plugin.configs.recommended];

gotcha The 'story-exports' rule requires that each story file has a default export. For CSF3 files with only meta, disable or adjust. ↓

fix Add default export or disable rule for test files: 'storybook/story-exports': 'off'.

Install

npm install eslint-plugin-storybook

yarn add eslint-plugin-storybook

pnpm add eslint-plugin-storybook

Imports

plugin
wrong
```
const plugin = require('eslint-plugin-storybook')
```
correct
```
import plugin from 'eslint-plugin-storybook'
```
Package exports a default plugin object. In CJS, use require().default or the module directly.
rules
```
import { rules } from 'eslint-plugin-storybook'
```
Named export for accessing individual rule definitions if needed.
configs
```
import { configs } from 'eslint-plugin-storybook'
```
Predefined configs: 'recommended', 'addon-interactions', 'csf-strict'. Access via configs.recommended etc.

Quickstart

Configures the plugin with recommended rules via the prefixed config name.

// .eslintrc.cjs
module.exports = {
  extends: ['plugin:storybook/recommended'],
  plugins: ['storybook'],
  rules: {
    'storybook/story-exports': 'error',
    'storybook/default-exports': 'error',
    'storybook/hierarchy-separator': 'warn',
    'storybook/no-title-property-in-meta': 'warn',
    'storybook/no-stories-of': 'error',
    'storybook/use-storybook-testing-library': 'warn',
  },
};