@rainstormy/preset-eslint-storybook v1.0.0-alpha.3

Storybook Preset for ESLint

This package provides a predefined, opinionated ESLint configuration suitable for any web project with Storybook stories.

Installation

Install the @rainstormy/preset-eslint-storybook package and its peer dependencies:

npm install --save-dev @rainstormy/preset-eslint-storybook eslint

pnpm install --save-dev @rainstormy/preset-eslint-storybook eslint

yarn add --dev @rainstormy/preset-eslint-storybook eslint

This preset configures a subset of rules from the following plugin, which is installed along with the preset package:

• eslint-plugin-storybook (with rule names prefixed by storybook/)

Usage

Create or extend a flat ESLint configuration file (eslint.config.js) to target Storybook configuration files and story files in TypeScript. For example:

import {
	eslintAmbientTypeScriptModules,
	eslintBase,
	eslintTestData,
} from "@rainstormy/preset-eslint-base"
import { eslintReact } from "@rainstormy/preset-eslint-react"
import { eslintStorybook } from "@rainstormy/preset-eslint-storybook"

export default [
	eslintBase({ files: ["**/*.+(js|ts|tsx)"] }),

	// `eslintAmbientTypeScriptModules`, `eslintReact`, and `eslintTestData` must follow `eslintBase` to take effect.
	eslintAmbientTypeScriptModules({ files: ["**/*.d.ts"] }),
	eslintReact({ files: ["**/*.tsx"] }),
	eslintTestData({ files: ["**/*.stories.+(ts|tsx)"] }),

	// `eslintStorybook` must follow a JSX preset such as `eslintReact` to take effect.
	eslintStorybook({
		files: [".storybook/**/*.+(ts|tsx)", "**/*.stories.+(ts|tsx)"],
	}),
]

Complementary Presets

• @rainstormy/preset-eslint-testing-library