Repository files navigation

This package has moved and is now part of theStorybook monorepo since version 9. Please update your dependencies. This repository is no longer maintained. If there are issues or requests, please report them in theStorybook monorepo.

Best practice rules for Storybook

You'll first need to installESLint:

npm install eslint --save-dev# oryarn add eslint --dev

Next, installeslint-plugin-storybook:

npm install eslint-plugin-storybook --save-dev# oryarn 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 thisESLint documentation.

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

exportdefault[// ...{// Inside your .eslintignore fileignores:['!.storybook'],},]

Use the following table to use the correct version of this package, based on the version of ESLint you're using:

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

Addplugin:storybook/recommended to the extends section of your.eslintrc configuration file. Note that we can omit theeslint-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.

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 aoverrides 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',}}]}

Useeslint.config.[c|m]?js file to configure rules using theflat 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.

importstorybookfrom'eslint-plugin-storybook'exportdefault[// add more generic rulesets here, such as:// js.configs.recommended,  ...storybook.configs['flat/recommended'],// something ...]

In case you are using utility functions from tools liketseslint, you might need to set the plugin a little differently:

importstorybookfrom"eslint-plugin-storybook";importsomePluginfrom'some-plugin';importtseslintfrom'typescript-eslint';exportdefaulttseslint.config(somePlugin,storybook.configs["flat/recommended"]// notice that it is not destructured);"

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 flat config section in youreslint.config.[m|c]?js file that applies the overrides only to your stories files.

importstorybookfrom'eslint-plugin-storybook'exportdefault[// ...  ...storybook.configs['flat/recommended'],{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',},},// something ...]

This plugin does not support MDX files.

Key: 🔧 = fixable

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

Looking into improving this plugin? That would be awesome!Please refer tothe contributing guidelines for steps to contributing.

MIT