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

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/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

npm