0.11.4 • Published 3 months ago

eslint-plugin-storybook v0.11.4

Weekly downloads
18
License
MIT
Repository
github
Last release
3 months ago

eslint-plugin-storybook

Best practice rules for Storybook

Installation

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

And finally, add this to your .eslintignore file:

// Inside your .eslintignore file
!.storybook

This allows for this plugin to also lint your configuration files inside the .storybook folder, so that you always have a correct configuration and don't face any issues regarding mistyped addon names, for instance.

For more info on why this line is required in the .eslintignore file, check this ESLint documentation.

If you are using flat config style, add this to your configuration file:

export default [
  // ...
  {
    // Inside your .eslintignore file
    ignores: ['!.storybook'],
  },
]

ESLint compatibility

Use the following table to use the correct version of this package, based on the version of ESLint you're using:

ESLint versionStorybook plugin version
^9.0.0^0.10.0
^8.57.0^0.10.0
^7.0.0~0.9.0

Usage

Configuration (.eslintrc)

Use .eslintrc.* file to configure rules in ESLint < v9. See also: https://eslint.org/docs/latest/use/configure/.

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.

Overriding/disabling rules

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',
      }
    }
  ]
}

Configuration (eslint.config.[c|m]?js)

Use eslint.config.[c|m]?js file to configure rules using the flat config style. This is the default in ESLint v9, but can be used starting from ESLint v8.57.0. See also: https://eslint.org/docs/latest/use/configure/configuration-files-new.

import storybook from 'eslint-plugin-storybook'

export default [
  // add more generic rulesets here, such as:
  // js.configs.recommended,
  ...storybook.configs['flat/recommended'],

  // something ...
]

Overriding/disabling rules

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 flat config section in your eslint.config.[m|c]?js file that applies the overrides only to your stories files.

import storybook from 'eslint-plugin-storybook'

export default [
  // ...

  ...storybook.configs['flat/recommended'],
  {
    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',
    },
  },

  // something ...
]

MDX Support

This plugin does not support MDX files.

Supported Rules and configurations

Key: 🔧 = fixable

Configurations: csf, csf-strict, addon-interactions, recommended

NameDescription🔧Included in configurations
storybook/await-interactionsInteractions should be awaited🔧addon-interactionsflat/addon-interactionsrecommendedflat/recommended
storybook/context-in-play-functionPass a context when invoking play function of another storyrecommendedflat/recommendedaddon-interactionsflat/addon-interactions
storybook/csf-componentThe component property should be setcsfflat/csfcsf-strictflat/csf-strict
storybook/default-exportsStory files should have a default export🔧csfflat/csfrecommendedflat/recommendedcsf-strictflat/csf-strict
storybook/hierarchy-separatorDeprecated hierarchy separator in title property🔧csfflat/csfrecommendedflat/recommendedcsf-strictflat/csf-strict
storybook/meta-inline-propertiesMeta should only have inline propertiesN/A
storybook/no-redundant-story-nameA story should not have a redundant name property🔧csfflat/csfrecommendedflat/recommendedcsf-strictflat/csf-strict
storybook/no-stories-ofstoriesOf is deprecated and should not be usedcsf-strictflat/csf-strict
storybook/no-title-property-in-metaDo not define a title in meta🔧csf-strictflat/csf-strict
storybook/no-uninstalled-addonsThis rule identifies storybook addons that are invalid because they are either not installed or contain a typo in their name.recommendedflat/recommended
storybook/prefer-pascal-caseStories should use PascalCase🔧recommendedflat/recommended
storybook/story-exportsA story file must contain at least one story exportrecommendedflat/recommendedcsfflat/csfcsf-strictflat/csf-strict
storybook/use-storybook-expectUse expect from @storybook/test, storybook/test or @storybook/jest🔧addon-interactionsflat/addon-interactionsrecommendedflat/recommended
storybook/use-storybook-testing-libraryDo not use testing-library directly on stories🔧addon-interactionsflat/addon-interactionsrecommendedflat/recommended

Contributors

Looking into improving this plugin? That would be awesome! Please refer to the contributing guidelines for steps to contributing.

License

MIT

@azul-tecnologia/eslint-config@unimed/z-components@infinitebrahmanuniverse/nolb-eslint-plugin-s@jarisinc/eslint-config-jaris@etchteam/eslinteslint-config-sandboxdse-labeldse-label-component@everything-registry/sub-chunk-1614@ventsislavnikolov/eslint-config@wonse/eslint-configtaiko-ui-v1wsf-componentswtc-example-packagesvelte-component-lib@dsdemo/eslint-config@cretadoc/eslint-config@comprend/eslint-config@dabee/eslint-config@cprussin/eslint-config@douglasdemoura/eslint-config@buncho/eslint-config@belgattitude/eslint-config-bases@paylivre/eslint-config@rubin-epo/eslint-config-react@ruijadom/eslint-config-custom@ruminat/eslint-config@runespoorstack/eslint-config@rocketmakers/eslinteslint-config-cyborgjump-start-tools@acmuta-research/eslint-configeslint-config-lineanci-react@developpeurdurable/nx-workspace-plugin@brucesong/eslint-config-next@brucesong/eslint-config-react@brucesong/eslint-config-react-nativekex-component-library@aidenlx/eslint-config@apitree.cz/eslint-config@armit/eslint-config-bases@andrao/eslint@aserto/ts-linting-configs@ag-media/eslint-config@ag-media/eslint-config-nextjs@aittorai/eslint-config-react@alexasselin/eslint-plugin-1@alquipo/eslint-config@aliz.ai/eslint-config-recommended@aztlan/eslint-config-base@baseline-ui/eslint-config@bitrise/eslint-plugin@bit-ocean/eslint-config@bestchatbots/eslint-config@beskar-labs/harmony@busybox/eslint-config@cityelectricalfactors/eslint-config-base@chirpy-dev/eslint-config@ceop/linter@2digits/eslint-config@21torr/janus@acdh-oeaw/eslint-config-storybook@ace-ex/eslint-config@actinc/eslint-config@adchitects/eslint-config@7sne/eslint@braineet/eslint-config@datarockets/style-guide@dh253/nds@dhruv-m-patel/eslint-config-react@fe-free/eslint-config-base@duongdev/eslint-config@gyldendal/kobber-eslint@guardian/eslint-config@handmade-systems/eslint-plugin@grixu/eslint-config@haojian-app/eslint-config@harimkims/eslint-config@focus21/eslint-config@harmonix-hub/eslint@higoralves/eslint-config@hi8u/eslint-config@hinataohyama/ts-eslint-config@hybrbase/eslint-config@huomu/eslint-config-base@elliemae/pui-cli@fuf-stack/eslint-config-fuf@gaze-ui/eslint-config@estcode/react-typescript-template@estcode/react-typescript-template-nevobit@etchteam/eslint-config@fullstacksjs/eslint-config@gio-design/s2-table@gipo355/eslint-config-base@gmjs/eslint-config@goddardsystems/web-component-library@inkohx/eslint-config-www@instill-ai/eslint-config-cortex@ktam/lint-react
0.11.4

3 months ago

0.11.3

4 months ago

0.11.2

5 months ago

0.11.1

7 months ago

0.11.0

7 months ago

0.10.2

7 months ago

0.10.1

8 months ago

0.10.0

8 months ago

0.9.0

9 months ago

0.7.0

1 year ago

0.8.0

1 year ago

0.6.14

2 years ago

0.6.15

2 years ago

0.6.13

2 years ago

0.6.12

2 years ago

0.6.11

2 years ago

0.6.9

2 years ago

0.6.10

2 years ago

0.6.7

3 years ago

0.6.6

3 years ago

0.6.8

3 years ago

0.6.5

3 years ago

0.5.12

3 years ago

0.5.13

3 years ago

0.6.3

3 years ago

0.6.2

3 years ago

0.6.4

3 years ago

0.6.1

3 years ago

0.6.0

3 years ago

0.5.10

3 years ago

0.5.11

3 years ago

0.5.8

3 years ago

0.5.9

3 years ago

0.5.7

3 years ago

0.5.4

3 years ago

0.5.3

4 years ago

0.5.6

3 years ago

0.5.5

3 years ago

0.5.2

4 years ago

0.5.1

4 years ago

0.0.1-alpha.8

4 years ago

0.0.1-alpha.9

4 years ago

0.0.1-alpha.6

4 years ago

0.0.1-alpha.7

4 years ago

0.0.1-alpha.4

4 years ago

0.0.1-alpha.5

4 years ago

0.0.1-alpha.2

4 years ago

0.0.1-alpha.3

4 years ago

0.0.1-alpha.1

4 years ago

0.3.0

4 years ago

0.2.1

4 years ago

0.2.0

4 years ago

0.3.5

4 years ago

0.5.0

4 years ago

0.4.1

4 years ago

0.3.2

4 years ago

0.2.3

4 years ago

0.4.0

4 years ago

0.3.1

4 years ago

0.2.2

4 years ago

0.3.4

4 years ago

0.2.5

4 years ago

0.4.2

4 years ago

0.3.3

4 years ago

0.2.4

4 years ago

0.0.1-alpha.0

4 years ago

0.1.1

4 years ago

0.1.0

5 years ago