@yungezeit/eslint-storybook NPM

@yungezeit/eslint-storybook

Personal ESLint flat configuration with Storybook and TypeScript support.

Features

All features of @yungezeit/eslint-base.
All features of @yungezeit/eslint-typescript.
Storybook support using eslint-plugin-storybook.

Install

# using pnpm
pnpm add -D @yungezeit/eslint-storybook
# using npm
npm add -D @yungezeit/eslint-storybook
# using yarn
yarn add -D @yungezeit/eslint-storybook
# using bun
bun add -D @yungezeit/eslint-storybook

Usage

Raw configuration

You may simply spread the raw configuration array:

// eslint.config.js
import storybookPreset from '@yungezeit/eslint-storybook';

export default [...storybookPreset];

Configuration function

Alternatively, you can use the createStorybookConfig function to create/merge a ESLint configuration array for a Storybook project. Using this function lets you tweak the base configuration behaviour by passing some options as a second argument.

// eslint.config.js
import { createStorybookConfig } from '@yungezeit/eslint-storybook';

export default createStorybookConfig([ /** Your configs… */], {
  /** Path to tsconfig root dir (see "Type-aware" linting below) */
  tsconfigRootDir: 'path/to/project',
  /** Internal patterns passed to `enforceImportOrder` (see "Imports order" below). */
  internalPatterns: [],
  /** (optional) Should node environment be supported? */
  node: true,
});

VSCode

You may want to add the following settings to your .vscode/settings.json:

{
  // Turn on ESLint for preset's supported languages if needed.
  "eslint.validate": [
    "javascript", "javascriptreact",
    "typescript", "typescriptreact",
    "json", "jsonc", "json5", "markdown", "yaml",
  ],
  // If you want ESLint to autofix problems on save.
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
  }
}