ESLint plugin

Storybook provides an dedicated ESLint plugin to help you write stories and components aligned with the latest Storybook and frontend development best practices.

Installation

You'll first need to install ESLint:

npm install --save-dev eslint

Next, install eslint-plugin-storybook:

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

Then 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"]
}

And finally, add this to your .eslintignore file:

!.storybook

This ensures that the plugin will also lint your configuration files inside the .storybook directory, so that you always have a correct configuration. For example, it can catch mistyped addon names in your main.js|ts file.

For more details on why this line is required in the .eslintignore file, refer to the ESLint documentation.

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

export default [
  // ...
  {
    // Inside your .eslintignore file
    ignores: ['!.storybook'],
  },
];

ESLint compatibility

Depending on the version of ESLint you are using, you may need to install a specific version of the Storybook plugin. Use the table below to match the plugin version to your ESLint version.

Usage

Configuration (.eslintrc)

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

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 individual rules. 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": [
    {
      // 👇 This should match the `stories` property in .storybook/main.js|ts
      "files": ['**/*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
      "rules": {
        // 👇 Enable this rule
        'storybook/csf-component': 'error',
        // 👇 Disable this rule
        'storybook/default-exports': 'off',
      }
    }
  ]
}

Configuration (flat config format)

Use eslint.config.js file to configure rules using the flat config style. 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.

import storybook from 'eslint-plugin-storybook';
 
export default [
  // Add more generic rulesets here, such as:
  // js.configs.recommended,
  ...storybook.configs['flat/recommended'],
 
  // ...
];

Overriding/disabling rules

Optionally, you can override, add, or disable individual rules. 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.js file that applies the overrides only to your stories files.

import storybook from 'eslint-plugin-storybook';
 
export default [
  // ...
 
  ...storybook.configs['flat/recommended'],
  {
    // 👇 This should match the `stories` property in .storybook/main.js|ts
    files: ['**/*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
    rules: {
      // 👇 Enable this rule
      'storybook/csf-component': 'error',
      // 👇 Disable this rule
      'storybook/default-exports': 'off',
    },
  },
 
  // ...
];

MDX Support

This plugin does not support MDX files.

Supported Rules and configurations

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