Storybook Preset for ESLint

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

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/)

Installation

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

npm install --save-dev @rainstormy/presets-eslint-storybook @rainstormy/presets-eslint eslint typescript

pnpm install --save-dev @rainstormy/presets-eslint-storybook @rainstormy/presets-eslint eslint typescript

yarn add --dev @rainstormy/presets-eslint-storybook @rainstormy/presets-eslint eslint typescript

Usage

Create or extend a flat ESLint configuration file (eslint.config.js) and apply the eslintPresetStorybook, eslintPresetStorybookConfiguration, and eslintPresetTestData presets.

For example (with the default options in comments):

import {
	eslintPresetTestData,
	eslintPresets,
} from "@rainstormy/presets-eslint"
import {
	eslintPresetStorybook,
	eslintPresetStorybookConfiguration,
} from "@rainstormy/presets-eslint-storybook"

export default eslintPresets({
	additionalPresets: [
		// ...other presets...
		eslintPresetStorybook({
			// targetFilePatterns: ["**/*.stories.@(js|jsx|ts|tsx)"],
		}),
		eslintPresetStorybookConfiguration({
			// targetFilePatterns: [".storybook/**/*.@(js|jsx|ts|tsx)"],
		}),
		eslintPresetTestData({
			// targetFilePatterns: [
			//     "**/*.@(spec|specs|stories|test|testdata|tests).@(js|jsx|ts|tsx)",
			// ],
		}),
	],
})