如何将 Storybook 与 ESLint 结合使用

Storybook 被奥迪、Twilio 和 Spotify 等公司的数千个团队使用。我们的社区使用 Storybook 开发从原子级 UI 组件到独立页面的所有内容。在此过程中，开发人员编写了无数 Stories。

尽管 Story 遵循 CSF（一种基于 ES6 的标准格式），但仍然很难捕获拼写错误和语法错误。也很难知道团队官方推荐哪些实践。

我很高兴分享 Storybook 的官方 ESLint 插件，这是一个自动化工具，可帮助你以更高的一致性且更少错误地编写 Story。你将花费更少的时间来修复 Story 中的错误，因为你根本不会犯错。

• ✅ 边写边验证 Story 代码
• 🗂 跨项目标准化 Story 编写方式
• 📐 12 条规则且仍在增加

为什么创建 ESLint 插件？

Storybook 的核心创新是“Story”构造。Story 以基于 ES6 的标准格式隔离和捕获组件示例。

但有时 Story 由于拼写错误、语法错误或忘记默认导出而无法正常工作。另一些时候，你可能想尝试最新的 Storybook 功能，例如 addon-interactions，但没有使用它的正确库。这些问题很容易修复，但也容易被忽略。

我们正在构建 eslint-plugin-storybook，以使 Story 代码符合标准并确保每个人都遵循最佳实践。

更重要的是，当你的代码遵循一致的格式时，你可以利用 Storybook 小版本/主版本随附的自动迁移和 codemods。这意味着保持最新状态所需的你的工作量甚至更少。

实际应用

该插件目前有 12 条规则，可显示错误和警告以及有用的建议。规则集将随着时间推移添加新规则而不断发展。以下是插件提供帮助的一些用例

从头开始编写 Story
storybook/story-exports 和 storybook/default-exports 将确保你的文件包含一个默认导出（称为 meta）和至少一个命名导出。这对于 Storybook 识别你的组件 Story 是必要的。

从旧版 storiesOf API 迁移
storybook/no-stories-of 可以帮助团队成员避免使用不再积极开发并将 Storybook 未来版本中弃用的旧版 Story 语法。

使用新的 addon-interactions 编写交互式 Story
在下面的 GIF 中，你可以看到 Linter 修复了与 play 函数和 addon-interactions 相关的三个不同规则：storybook/await-interactions、storybook/use-storybook-expect 和 storybook/use-storybook-testing-library。

用于自动迁移的 Codemods
当 API 发生变化时，Storybook 提供用于自动迁移的 Codemods。在 6.4 版本中，这已集成到 npx sb upgrade 命令中。但 Codemods 只有在代码遵循标准时才有效。我们的 Linter 插件确保你的代码遵循 Storybook 标准，因此始终能够进行自动迁移。

还有更多 Lint 规则
安装插件即可发现所有规则。如果你对某条规则有疑问，请点击上下文链接查阅该规则的文档，其中包含正确和不正确的示例。

开始使用 Storybook + ESLint

如果你的项目已经使用 ESLint，首先尝试 Storybook 的自动迁移，它将为你自动添加和配置 Linter

npx sb@latest automigrate

手动安装
如果自动迁移与你的项目设置不兼容，请手动安装插件。如果你尚未安装 ESLint，则需要先安装它

npm install eslint --save-dev
# or
yarn add eslint --dev

接下来，安装 eslint-plugin-storybook

npm install eslint-plugin-storybook --save-dev
# or
yarn add eslint-plugin-storybook --dev

插件安装完成后，你只需将 "plugin:storybook/recommended" 添加到 .eslintrc 配置文件的 extends 部分即可

{
  // extend plugin:storybook/<configuration>, such as:
  "extends": ["plugin:storybook/recommended"]
}

此 Linter 只会对遵循 *.stories.*（我们推荐这种模式）或 *.story.* 模式的文件运行。这是一个自动配置，所以你无需做任何事情！

配置插件
按照此处的说明更改插件的行为方式。例如，忽略某些规则或抛出错误而不是警告。

参与其中

该 ESLint 插件由 Yann Braga (我!) 和 Michael Shilman 开发，并获得了整个 Storybook 社区的反馈。特别感谢 Kyle Gach、Norbert de Langen、Tom Coleman 和 Oscar Dominguez 提供的早期反馈，以及 Rafael Rozon 最初创建了该库。

该项目由 1400 多名开源贡献者维护，并由一个指导委员会指导。如果你有兴趣贡献，请在 GitHub 上查看 Storybook，创建一个 Issue，或提交 Pull Request。

在 Discord 与我们聊天——通常会有维护者在线。在 Open Collective 捐赠。 通过 Twitter 了解 Storybook 的最新消息，并通过在下方注册我们的邮件列表保持更新。