Elevate Storybook Quality with ESLint Plugin

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

Download Details:

Author: storybookjs

Official Github: https://github.com/storybookjs/eslint-plugin-storybook 

License: MIT

#typescript