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
# or
yarn add eslint --dev
Next, install eslint-plugin-storybook
:
npm install eslint-plugin-storybook --save-dev
# or
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:
{
// 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:
Configurations: csf, csf-strict, addon-interactions, recommended
Name | Description | Included in configurations | |
---|---|---|---|
storybook/await-interactions |
Interactions should be awaited |
|
|
storybook/context-in-play-function |
Pass a context when invoking play function of another story |
|
|
storybook/csf-component |
The component property should be set |
|
|
storybook/default-exports |
Story files should have a default export |
|
|
storybook/hierarchy-separator |
Deprecated hierarchy separator in title property |
|
|
storybook/no-redundant-story-name |
A story should not have a redundant name property |
|
|
storybook/no-stories-of |
storiesOf is deprecated and should not be used |
|
|
storybook/no-title-property-in-meta |
Do not define a title in meta |
|
|
storybook/prefer-pascal-case |
Stories should use PascalCase |
|
|
storybook/story-exports |
A story file must contain at least one story export |
|
|
storybook/use-storybook-expect |
Use expect from @storybook/jest |
|
|
storybook/use-storybook-testing-library |
Do not use testing-library directly on stories |
|
Contributors
Looking into improving this plugin? That would be awesome! Please refer to the contributing guidelines for steps to contributing.