ESLint 错误：“@storybook/react”应该列在项目的依赖项中，而不是 devDependency 中

Question

使用 ESLint 将 Storybook 安装到 React.js 应用程序中后，VSCode linter 无法获取示例

@storybook/react

文件中的

.stories.js

导入。

它给了我以下错误：

'@storybook/react' should be listed in the project's dependencies, not devDependencies.eslintimport/no-extraneous-dependencies

Answer 1

通过在我的

.eslintrc

文件中添加忽略规则，我能够消除 linter 警告：

"rules": {
  "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": [
          "**/*.stories.*",
          "**/.storybook/**/*.*"
        ],
        "peerDependencies": true
      }
    ]
}

这里有一个很好的例子：https://github.com/storybookjs/linter-config/blob/master/eslint.config.js

Answer 2

我最近也遇到了同样的问题。我通过重新启动 ESLint 服务器解决了这个问题。 为此，请输入 Ctrl+Shift+P 打开命令选项板，然后搜索命令 ESLint: Restart ESLint Server 并按 Enter 键。

Answer 3

我最近也遇到了这个问题，但在 NextJS/Typescript 项目中有不同的根本原因。在我的文件中，我有：

import { Meta, StoryObj } from "@storybook/react";

将此更新为仅将对象导入为类型修复了我这边的错误：

import type { Meta, StoryObj } from "@storybook/react";

忽略依赖关系也有效，但我相信在我的情况下，纠正导入是正确的方法，因为 Typescript 可以推断它只是 dev，因为它只是一个类型定义。