如何将 Storybook 与 ESLint 结合使用

Audi、Twilio 和 Spotify 等公司的数千个团队都在使用 Storybook。我们的社区使用 Storybook 开发从原子 UI 组件到隔离页面的一切内容。在此过程中，开发人员编写了无数的 stories。

即使 stories 遵循 CSF 这种基于 ES6 的标准格式，但仍然很难发现错别字和语法错误。或者了解团队官方推荐的做法。

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

• ✅ 在编写故事代码时进行验证
• 🗂 标准化跨项目编写 stories 的方式
• 📐 12 条规则，并且还在增加

为什么要创建 ESLint 插件？

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

但有时 stories 无法正常工作，因为存在错别字、语法错误，或者人们忘记了默认导出。其他时候，您可能想尝试最新的 Storybook 功能，例如 addon-interactions，但没有正确的库来使用它。这些问题很容易修复，但也很容易被忽略。

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

更重要的是，当您的代码遵循一致的格式时，您可以利用 Storybook 的自动迁移和代码修改，这些迁移和代码修改随次要/主要版本一起发布。这意味着跟上最新版本所需的工作量更少。

观看实际效果

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

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

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

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

用于自动迁移的代码修改
当 API 发生更改时，Storybook 提供用于自动迁移的代码修改。在 6.4 中，这已内置到 npx sb upgrade 命令中。但代码修改仅在代码遵循标准时才有效。我们的 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-plugin 由 Yann Braga（我！） 和 Michael Shilman 开发，并获得了整个 Storybook 社区的反馈。特别感谢 Kyle Gach、Norbert de Langen、Tom Coleman 和 Oscar Dominguez 的早期反馈，以及 Rafael Rozon 最初创建该库。

该项目由 1,400 多名开源贡献者维护，并由指导委员会指导。如果您有兴趣参与贡献，请在 GitHub 上查看 Storybook，创建问题或提交拉取请求。

在 Discord 中与我们聊天 — 维护者通常在线。在 Open Collective 上捐款。  在 Twitter 上以及通过注册我们的邮件列表，了解 Storybook 的最新消息。