Support for the new FlatConfig format

[AndreaPontrandolfo]

Any plans to support the new Eslint FlatConfig format, eslint.config.js?
In the next major release of Eslint, the new format is gonna be the default and the old format deprecated, so it should be updated.

[jaydenseric]

The most obvious thing that needs to happen is to publish TypeScript typings for the package, so that you can programmatically import and use this ESLint plugin with type safety when your eslint.config.js file is type-checked:

// @ts-check

// Currently `any` :(
// Even worse, it's actually a TypeScript error if `compilerOptions.moduleResolution`
// is configured to `bundler` instead of `nodenext`, about there being no default export.
import eslintPluginStorybook from "eslint-plugin-storybook";

[yannbf]

Hey there! Thanks for opening this issue.

Are you willing to contribute to make this happen? I'm happy to guide in the process if needed!

[waldemarfm]

@yannbf I'm interested in helping with this. I don't think it'll be too complicated.

Would the approach be a major version bump and go all in on the change, or do we somehow offer support for both formats and make it opt-in for projects using flag configs?

[AndreaPontrandolfo]

I would love to contribute but i also have my hands-full with OSS projects right now.

[yannbf]

Hey @AndreaPontrandolfo @waldemarfm contributions are definitely welcome. If this change can be done in a backwards compatible way, that'd be definitely preferred! If you know what are the steps to support this format, describing those would already be quite helpful as well!

[mheob]

Some more information: Plugin Migration to Flat Config - ESLint

[xdebbie]

Do we have any new updates on this issue?

[yannbf]

Hey everyone! There is a canary version that introduced support to the flat config file while trying to maintain it backwards compatible. We are not 100% confident of merging it yet, so please give it a try:

npm install [email protected]
# or 
yarn add [email protected]

Feedback is truly appreciated.

[jerkovicl]

@yannbf Tested on project and linting works with flat config, only thing to improve is types but that's already mentioned in PR

[Adamlb]

[email protected]
Works for me with eslint 8.57

[bmulholland]

canary has been working for us with eslint 9 & flat config

[rikisamurai]

Hey everyone! There is a canary version that introduced support to the flat config file while trying to maintain it backwards compatible. We are not 100% confident of merging it yet, so please give it a try:

npm install [email protected]
# or 
yarn add [email protected]

Feedback is truly appreciated.

hello，could you tell how to configure this plugin in the flat config？

[bmulholland]

eslint.config.js:

import eslintPluginStorybook from "eslint-plugin-storybook"

export default [
   // other config here
  ...eslintPluginStorybook.configs["flat/recommended"],
  // more config
]

[kuschti]

Not sure if anyone is running into this, but it seems I had to make this change when using [email protected] in dist/configs/flat/recommended.js

     {
         name: 'storybook:recommended:stories-rules',
-        files: ['*.stories.@(ts|tsx|js|jsx|mjs|cjs)', '*.story.@(ts|tsx|js|jsx|mjs|cjs)'],
+        files: ['**/*.stories.@(ts|tsx|js|jsx|mjs|cjs)', '**/*.story.@(ts|tsx|js|jsx|mjs|cjs)'],

we have the same problem, it's already mentioned in the flat-config PR #156

[maxpatiiuk]

Thank you for updating this package to support flat config.
However, I encountered an issue as this package depends on a very old version of @typescript-eslint/utils ^5.62.0.
That version of @typescript-eslint/utils does not support ESLint 9, which causes yarn dependency resolution to fail

[stevezhu]

Not sure if anyone is running into this, but it seems I had to make this change when using [email protected] in dist/configs/flat/recommended.js

     {
         name: 'storybook:recommended:stories-rules',
-        files: ['*.stories.@(ts|tsx|js|jsx|mjs|cjs)', '*.story.@(ts|tsx|js|jsx|mjs|cjs)'],
+        files: ['**/*.stories.@(ts|tsx|js|jsx|mjs|cjs)', '**/*.story.@(ts|tsx|js|jsx|mjs|cjs)'],

we have the same problem, it's already mentioned in the flat-config PR #156

Ah great didn't catch that, thanks!