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
yarn add eslint --dev
Next, install eslint-plugin-storybook
:
npm install eslint-plugin-storybook --save-dev
yarn add eslint-plugin-storybook --dev
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:
{
"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": [
{
"files": ['*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
"rules": {
'storybook/hierarchy-separator': 'error',
'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
Contributors
Looking into improving this plugin? That would be awesome!
Please refer to the contributing guidelines for steps to contributing.