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 i eslint --save-dev

Next, install eslint-plugin-storybook:

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

Usage

Add storybook to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
  "plugins": ["storybook"]
}

Then, define which rule configurations to extend in your eslint file. Before that, it's important to understand that Storybook linting rules should only be applied in your stories files. You don't want rules to affect your other files such as production or test code as the rules might conflict with rules from other ESLint plugins.

Run the plugin only against story files

We don't want eslint-plugin-storybook to run against your whole codebase. To run this plugin only against your stories files, you have the following options:

ESLint overrides

One way of restricting ESLint config by file patterns is by using ESLint overrides.

Assuming you are using the recommended .stories extension in your files, the following config would run eslint-plugin-storybook only against your stories files:

// .eslintrc
{
  // 1) Here we have our usual config which applies to the whole project, so we don't put storybook preset here.
  "extends": ["airbnb", "plugin:prettier/recommended"],

  // 2) We load eslint-plugin-storybook globally with other ESLint plugins.
  "plugins": ["react-hooks", "storybook"],

  "overrides": [
    {
      // 3) Now we enable eslint-plugin-storybook rules or preset only for matching files!
      // you can use the one defined in your main.js
      "files": ['src/**/*.stories.@(js|jsx|ts|tsx)'],
      "extends": ["plugin:storybook/recommended"],

      // 4) Optional: you can override specific rules here if you want. Else delete this
      "rules": {
        'storybook/no-redundant-story-name': 'error'
      }
    },
  ],
};

ESLint Cascading and Hierarchy

Another approach for customizing ESLint config by paths is through ESLint Cascading and Hierarchy. This is useful if all your stories are placed under the same folder, so you can place there another .eslintrc where you enable eslint-plugin-storybook for applying it only to the files under such folder, rather than enabling it on your global .eslintrc which would apply to your whole project.

Supported Rules

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