README.md

Build bulletproof UI components faster

eslint-plugin-storybook

Best practice rules for Storybook

Installation

You'll first need to install ESLint:

npm install eslint --save-dev
# or
yarn add eslint --dev

Next, install eslint-plugin-storybook:

npm install eslint-plugin-storybook --save-dev
# or
yarn add eslint-plugin-storybook --dev

And finally, add this to your .eslintignore file:

// Inside your .eslintignore file
!.storybook
!.storybook/*

This allows for this plugin to also lint your configuration files inside the .storybook folder, so that you always have a correct configuration and don't face any issues regarding mistyped addon names, for instance.

For more info, check this ESLint documentation.

Usage

Use .eslintrc.* file to configure rules. See also: https://eslint.org/docs/user-guide/configuring

Add plugin:storybook/recommended to the extends section of your .eslintrc configuration file. Note that we can omit the eslint-plugin- prefix:

{
  // extend plugin:storybook/<configuration>, such as:
  "extends": ["plugin:storybook/recommended"]
}

This plugin will only be applied to files following the *.stories.* (we recommend this) or *.story.* pattern. This is an automatic configuration, so you don't have to do anything.

Overriding/disabling rules

Optionally, you can override, add or disable rules settings. You likely don't want these settings to be applied in every file, so make sure that you add a overrides section in your .eslintrc.* file that applies the overrides only to your stories files.

{
  "overrides": [
    {
      // or whatever matches stories specified in .storybook/main.js
      "files": ['*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
      "rules": {
        // example of overriding a rule
        'storybook/hierarchy-separator': 'error',
        // example of disabling a rule
        'storybook/default-exports': 'off',
      }
    }
  ]
}

MDX Support

This plugin does not support MDX files.

Supported Rules and configurations

Key: 🔧 = fixable

Configurations: csf, csf-strict, addon-interactions, recommended

Name	Description	🔧	Included in configurations
storybook/await-interactions	Interactions should be awaited	🔧	addon-interactions recommended
storybook/context-in-play-function	Pass a context when invoking play function of another story		recommended addon-interactions
storybook/csf-component	The component property should be set		csf
storybook/default-exports	Story files should have a default export	🔧	csf recommended
storybook/hierarchy-separator	Deprecated hierarchy separator in title property	🔧	csf recommended
storybook/no-redundant-story-name	A story should not have a redundant name property	🔧	csf recommended
storybook/no-stories-of	storiesOf is deprecated and should not be used		csf-strict
storybook/no-title-property-in-meta	Do not define a title in meta	🔧	csf-strict
storybook/no-uninstalled-addons	This rule identifies storybook addons that are invalid because they are either not installed or contain a typo in their name.		recommended
storybook/prefer-pascal-case	Stories should use PascalCase	🔧	recommended
storybook/story-exports	A story file must contain at least one story export		recommended csf
storybook/use-storybook-expect	Use expect from @storybook/jest	🔧	addon-interactions recommended
storybook/use-storybook-testing-library	Do not use testing-library directly on stories	🔧	addon-interactions recommended

Contributors

Looking into improving this plugin? That would be awesome! Please refer to the contributing guidelines for steps to contributing.

License

MIT