Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
eslint-plugin-storybook
Advanced tools
The eslint-plugin-storybook npm package is designed to help enforce best practices and conventions for writing stories in Storybook, which is a tool for developing UI components in isolation. It provides a set of ESLint rules specifically tailored for Storybook files.
Enforce consistent naming for story files
This rule ensures that the names of the stories are consistent with the file name.
"storybook/consistent-story-name": "error"
Require or disallow a specific structure in story files
This rule can enforce a specific structure for story exports, such as allowing only default or named exports in story files.
"storybook/story-exports": ["error", { "allow": ["default", "named"] }]
Enforce the use of Storybook's controls
This rule ensures that stories use Storybook's controls feature to allow for live customization of component props.
"storybook/use-storybook-controls": "error"
This package provides ESLint rules for React applications. It includes rules that help prevent common issues in React code. While it is not specific to Storybook, it can be used alongside eslint-plugin-storybook to enforce best practices in React components that are showcased in Storybook.
This package contains ESLint rules for accessibility in JSX elements. It helps ensure that UI components are accessible to all users, including those using assistive technologies. It complements eslint-plugin-storybook by focusing on accessibility concerns, which are also important when developing components in Storybook.
Similar to eslint-plugin-react but for Vue.js applications, this package provides a collection of ESLint rules specific to Vue.js. It helps maintain code quality and adhere to Vue.js best practices. When using Storybook with Vue.js projects, eslint-plugin-vue can be used in conjunction with eslint-plugin-storybook to ensure high-quality component code.
Build bulletproof UI components faster
Best practice rules for Storybook
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
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.
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',
}
}
]
}
This plugin does not support MDX files.
Key: 🔧 = fixable
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 | 🔧 |
|
Looking into improving this plugin? That would be awesome! Please refer to the contributing guidelines for steps to contributing.
FAQs
Best practice rules for Storybook
The npm package eslint-plugin-storybook receives a total of 2,231,213 weekly downloads. As such, eslint-plugin-storybook popularity was classified as popular.
We found that eslint-plugin-storybook demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.