eslint-plugin-storybook

What is eslint-plugin-storybook?

The eslint-plugin-storybook npm package is designed to help enforce best practices and conventions for writing stories in Storybook, which is a tool for developing UI components in isolation. It provides a set of ESLint rules specifically tailored for Storybook files.

What are eslint-plugin-storybook's main functionalities?

Enforce consistent naming for story files

This rule ensures that the names of the stories are consistent with the file name.

"storybook/consistent-story-name": "error"

Require or disallow a specific structure in story files

This rule can enforce a specific structure for story exports, such as allowing only default or named exports in story files.

"storybook/story-exports": ["error", { "allow": ["default", "named"] }]

Enforce the use of Storybook's controls

This rule ensures that stories use Storybook's controls feature to allow for live customization of component props.

"storybook/use-storybook-controls": "error"

Other packages similar to eslint-plugin-storybook

eslint-plugin-react

This package provides ESLint rules for React applications. It includes rules that help prevent common issues in React code. While it is not specific to Storybook, it can be used alongside eslint-plugin-storybook to enforce best practices in React components that are showcased in Storybook.

eslint-plugin-jsx-a11y

This package contains ESLint rules for accessibility in JSX elements. It helps ensure that UI components are accessible to all users, including those using assistive technologies. It complements eslint-plugin-storybook by focusing on accessibility concerns, which are also important when developing components in Storybook.

eslint-plugin-vue

Similar to eslint-plugin-react but for Vue.js applications, this package provides a collection of ESLint rules specific to Vue.js. It helps maintain code quality and adhere to Vue.js best practices. When using Storybook with Vue.js projects, eslint-plugin-vue can be used in conjunction with eslint-plugin-storybook to ensure high-quality component code.

README

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

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.

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