Build bulletproof UI components faster
eslint-plugin-storybook
Best practice rules for Storybook
Installation
You'll first need to install ESLint:
npm i eslint --save-dev
Next, install eslint-plugin-storybook
:
npm install eslint-plugin-storybook --save-dev
Usage
Add storybook
to the plugins section of your .eslintrc
configuration file. You can omit the eslint-plugin-
prefix:
{
"plugins": ["storybook"]
}
Then, define which rule configurations to extend in your eslint file. Before that, it's important to understand that Storybook linting rules should only be applied in your stories files. You don't want rules to affect your other files such as production or test code as the rules might conflict with rules from other ESLint plugins.
Run the plugin only against story files
We don't want eslint-plugin-storybook
to run against your whole codebase. To run this plugin only against your stories files, you have the following options:
ESLint overrides
One way of restricting ESLint config by file patterns is by using ESLint overrides
.
Assuming you are using the recommended .stories
extension in your files, the following config would run eslint-plugin-storybook
only against your stories files:
{
"extends": ["airbnb", "plugin:prettier/recommended"],
"plugins": ["react-hooks", "storybook"],
"overrides": [
{
"files": ['src/**/*.stories.@(js|jsx|ts|tsx)'],
"extends": ["plugin:storybook/recommended"],
"rules": {
'storybook/no-redundant-story-name': 'error'
}
},
],
};
ESLint Cascading and Hierarchy
Another approach for customizing ESLint config by paths is through ESLint Cascading and Hierarchy. This is useful if all your stories are placed under the same folder, so you can place there another .eslintrc
where you enable eslint-plugin-storybook
for applying it only to the files under such folder, rather than enabling it on your global .eslintrc
which would apply to your whole project.
Supported Rules
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.