@chanzuckerberg/eslint-plugin-stories

ESLint rules for Storybook stories.

Usage no npm install needed!

<script type="module">
  import chanzuckerbergEslintPluginStories from 'https://cdn.skypack.dev/@chanzuckerberg/eslint-plugin-stories';
</script>

README

eslint-plugin-stories

ESLint rules for Storybook stories.

In particular, these rules ensure that stories can be used in non-Storybook contexts. For example, for accessibility testing via axe-storybook-testing, or visual regression testing via percy-storybook.

Installation

Install @chanzuckerberg/eslint-plugin-stories with your favorite package manager. With yarn, that would look like

yarn add --dev @chanzuckerberg/eslint-plugin-stories

Usage

Add @chanzuckerberg/stories as a plugin in your eslint configuration file.

// .eslintrc.json
{
  "plugins": ["@chanzuckerberg/stories"]
}

Then you can either extend the recommended config to turn on all the rules

// .eslintrc.json
{
  "extends": [
    "plugin:@chanzuckerberg/stories/recommended"
  ]
}

or configure the rules individually

// .eslintrc.json
{
  "rules": {
    "@chanzuckerberg/stories/no-ext-resources-in-stories": "warn"
  }
}

Rules

Name Description Config
csf-v3-types Enforce component story format (CSF) v3 stories have explicit TypeScript types where needed for inferrence strict
no-csf-v2 Use object stories (component story format v3) instead of functions. strict
no-ext-resources-in-stories Prevent external resources from being loaded in stories. recommended