Build bulletproof UI components faster

eslint-plugin-storybook

Best practice rules for Storybook

Installation

You'll first need to install ESLint:

1npm install eslint --save-dev
2# or
3yarn add eslint --dev

Next, install eslint-plugin-storybook:

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

And finally, add this to your .eslintignore file:

// Inside your .eslintignore file
!.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 on why this line is required in the .eslintignore file, check this ESLint documentation.

If you are using flat config style, add this to your configuration file:

1export default [
2  // ...
3  {
4    // Inside your .eslintignore file
5    ignores: ['!.storybook'],
6  },
7]

Usage

Configuration (.eslintrc)

Use .eslintrc.* file to configure rules in ESLint < v9. See also: https://eslint.org/docs/latest/use/configure/.

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

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

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.

1{
2  "overrides": [
3    {
4      // or whatever matches stories specified in .storybook/main.js
5      "files": ['**/*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
6      "rules": {
7        // example of overriding a rule
8        'storybook/hierarchy-separator': 'error',
9        // example of disabling a rule
10        'storybook/default-exports': 'off',
11      }
12    }
13  ]
14}

Configuration (eslint.config.[c|m]?js)

Use eslint.config.[c|m]?js file to configure rules. This is the default in ESLint v9, but can be used starting from ESLint v8.57.0. See also: https://eslint.org/docs/latest/use/configure/configuration-files-new.

1import storybook from 'eslint-plugin-storybook'
2
3export default [
4  // add more generic rulesets here, such as:
5  // js.configs.recommended,
6  ...storybook.configs['flat/recommended'],
7
8  // something ...
9]

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 flat config section in your eslint.config.[m|c]?js file that applies the overrides only to your stories files.

1import storybook from 'eslint-plugin-storybook'
2
3export default [
4  // ...
5
6  ...storybook.configs['flat/recommended'],
7  {
8    files: ['**/*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
9    rules: {
10      // example of overriding a rule
11      'storybook/hierarchy-separator': 'error',
12      // example of disabling a rule
13      'storybook/default-exports': 'off',
14    },
15  },
16
17  // something ...
18]

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 flat/addon-interactions recommended flat/recommended
storybook/context-in-play-function	Pass a context when invoking play function of another story		recommended flat/recommended addon-interactions flat/addon-interactions
storybook/csf-component	The component property should be set		csf flat/csf csf-strict flat/csf-strict
storybook/default-exports	Story files should have a default export	🔧	csf flat/csf recommended flat/recommended csf-strict flat/csf-strict
storybook/hierarchy-separator	Deprecated hierarchy separator in title property	🔧	csf flat/csf recommended flat/recommended csf-strict flat/csf-strict
storybook/meta-inline-properties	Meta should only have inline properties		N/A
storybook/no-redundant-story-name	A story should not have a redundant name property	🔧	csf flat/csf recommended flat/recommended csf-strict flat/csf-strict
storybook/no-stories-of	storiesOf is deprecated and should not be used		csf-strict flat/csf-strict
storybook/no-title-property-in-meta	Do not define a title in meta	🔧	csf-strict flat/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 flat/recommended
storybook/prefer-pascal-case	Stories should use PascalCase	🔧	recommended flat/recommended
storybook/story-exports	A story file must contain at least one story export		recommended flat/recommended csf flat/csf csf-strict flat/csf-strict
storybook/use-storybook-expect	Use expect from @storybook/test or @storybook/jest	🔧	addon-interactions flat/addon-interactions recommended flat/recommended
storybook/use-storybook-testing-library	Do not use testing-library directly on stories	🔧	addon-interactions flat/addon-interactions recommended flat/recommended

Contributors

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

License

MIT