在 Context Hub 中检索并使用 eslint-plugin-storybook：Storybook 故事文件的 ESLint 配置全解

【免费下载链接】context-hub项目地址https://gitcode.com/gh_mirrors/co/context-hub点击查看免费下载本篇基于 Context Hub 仓库中 eslint-plugin-storybook 的 JavaScript 指南讲解如何把 Storybook 规则集成进 ESLint从安装、Flat Configeslint.config.mjs、旧版.eslintrc.cjs三类配置写法到 monorepo 下的规则作用域控制与常见坑位。读完你可以直接复制配置到自己项目中为*.stories.*/*.story.*文件启用storybook/*规则集并理解这份文档在 Context Hub 内容体系中的注册与获取方式。文档定位与版本边界该指南覆盖eslint-plugin-storybook10.2.17语言变体为 JavaScriptfrontmatter 中metadata.languages: javascript、metadata.versions: 10.2.17、metadata.source: maintainer、updated-on: 2026-03-13内容维护方标注为 maintainer属于社区维护来源的可信级别。文档开宗明义给出了一条 Golden Ruleeslint-plugin-storybook只在 ESLint 配置中使用。它没有运行时客户端、没有认证、没有任何环境变量。也就是说它是一个纯 devDependencies 的 lint 插件与eslint一起安装后要么对 story 文件应用 Storybook 预设要么手动开启具体的storybook/*规则。文档明确提示它面向的是 Storybook story 源码文件非 story 内容应交由独立的 lint 或校验流程处理。版本敏感说明Version-Sensitive Notes指出当前包文档对外暴露两个预设——Flat Config 的storybook.configs[flat/recommended]与 Legacy 的plugin:storybook/recommended。两者互斥使用这是后文配置写法的第一原则。安装npm install -D eslint eslint-plugin-storybook npx eslint --version文档同时给出配置文件命名建议仓库尚未使用 ESM 时Flat Config 优先使用eslint.config.mjs如果package.json已设置type: moduleeslint.config.js也可以工作。Flat Configeslint.config.mjs现代 ESLint 的推荐做法是直接把插件的 flat recommended 配置展开spread到导出配置数组中import storybook from eslint-plugin-storybook; export default [ ...storybook.configs[flat/recommended], ];这个共享预设是用推荐的storybook/*规则集 lint Storybook 故事文件的最简路径。追加项目专属 Storybook 规则当需要对自己项目的 story 施加更严格的规则时在预设之后追加一个配置块Flat Config 按数组顺序匹配后块可覆盖前块import storybook from eslint-plugin-storybook; export default [ ...storybook.configs[flat/recommended], { files: [ **/*.stories.{js,jsx,ts,tsx}, **/*.story.{js,jsx,ts,tsx}, ], rules: { storybook/default-exports: error, storybook/story-exports: error, storybook/no-redundant-story-name: warn, }, }, ];这里涉及的三条规则语义可以从规则名直接读出storybook/default-exportserror约束 story 文件的默认导出结构storybook/story-exportserror约束导出项是否符合 story 约定storybook/no-redundant-story-namewarn提示冗长的 story 命名仅告警不阻断。手动注册插件不用共享预设当你只想挑选一小撮规则、不想吃下完整 recommended 预设时手动注册插件import storybook from eslint-plugin-storybook; export default [ { files: [ **/*.stories.{js,jsx,ts,tsx}, **/*.story.{js,jsx,ts,tsx}, ], plugins: { storybook, }, rules: { storybook/default-exports: error, storybook/story-exports: error, storybook/no-redundant-story-name: warn, }, }, ];Flat Config 下手动注册的要点是plugins: { storybook }——对象键是短名storybook值就是import进来的插件默认导出规则 ID 统一使用storybook/前缀。Legacy Config.eslintrc.cjs如果仓库仍在使用旧版 ESLint 配置直接 extends 插件的 recommended 预设module.exports { extends: [plugin:storybook/recommended], };手动 Legacy 配置不想用预设时用overrides把插件和规则限定到 story 文件module.exports { overrides: [ { files: [**/*.stories.{js,jsx,ts,tsx}, **/*.story.{js,jsx,ts,tsx}], plugins: [storybook], rules: { storybook/default-exports: error, storybook/story-exports: error, }, }, ], };注意 Legacy 写法与 Flat 写法的两处差异插件以字符串storybook登记在plugins数组中而不是对象键值规则作用域通过overrides[].files限定而不是顶层files字段。常见工作流检查所有 Storybook storynpx eslint .或者只针对 story 文件npx eslint src/**/*.stories.{js,jsx,ts,tsx} src/**/*.story.{js,jsx,ts,tsx}该包的所有规则 ID 均使用storybook/前缀。在 monorepo 中把 lint 限定到单个包Flat 预设可以与其他 ESLint 配置块并列存在。当只有一个 workspace 包含 Storybook story 时追加一个只命中该包的配置块import storybook from eslint-plugin-storybook; export default [ ...storybook.configs[flat/recommended], { files: [packages/ui/**/*.stories.{js,jsx,ts,tsx}], rules: { storybook/no-redundant-story-name: warn, }, }, ];常见坑位Pitfalls文档明确列出的五条注意事项建议逐条对照检查storybook.configs[flat/recommended]是展开进顶层配置数组的用...不能作为一个嵌套对象塞进数组元素里plugin:storybook/recommended只能出现在 legacy.eslintrc*文件中storybook.configs[flat/recommended]只能用于 Flat Config。两者不要混用除非有意为之把 Storybook 规则限定在 story 文件内不要泄漏到普通源码该插件面向 Storybook story 源文件非 story 内容的 lint/校验请保持独立手动追加规则时规则 ID 一律使用storybook/前缀。本文档在 Context Hub 中的注册与获取方式上述指南在 Context Hub 仓库中是一个标准的内容条目doc遵循 内容规范 定义的目录结构与 frontmatter 约定content/eslint/docs/eslint-plugin-storybook/javascript/DOC.md其中eslint是作者/组织维度eslint-plugin-storybook来自 frontmatter 的name字段条目 ID 即eslint/eslint-plugin-storybookjavascript子目录表示这是 JavaScript 语言变体。frontmatter 中的versions字段按规范始终指 npm/PyPI 上的包版本本条为10.2.17revision与updated-on共同向 Agent 表达内容新鲜度source: maintainer表示该条目由维护者来源提交。仓库的 CLIcli/README.md、llms.txt把这些 frontmatter 编译为可检索的 registry。安装后可以用如下命令检索并拉取本文档的 JavaScript 变体chub search eslint storybook # 找到条目 chub get eslint/eslint-plugin-storybook --lang js # 拉取正文从源码结构看frontmatter 由 frontmatter 解析模块 以 YAML 解析字段校验规则与 内容规范 中 frontmatter 表格一一对应这也是该指南中name/description/metadata.*各字段必须齐备的原因。Agent 侧的典型用法见 get-api-docs 技能写涉及 Storybook 故事文件的代码前先chub get拉取当前指南而不是依赖训练期记忆中的 API 形态。小结eslint-plugin-storybook的集成路径可以归纳为三种粒度场景写法关键点Flat Config吃下推荐规则集...storybook.configs[flat/recommended]必须展开到顶层数组Flat/Legacy只挑部分规则plugins手动注册 files限定规则 ID 用storybook/前缀Legacy 全量预设extends: [plugin:storybook/recommended]仅.eslintrc*可用配置完成后npx eslint src/**/*.stories.{js,jsx,ts,tsx}即可验证规则是否生效。该指南针对eslint-plugin-storybook10.2.17如果你的包版本不同建议以 Context Hub 中的该条目 frontmatter 里标注的版本为准并在项目内核对当前 npm 版本的预设命名。赞分享【免费下载链接】context-hub项目地址https://gitcode.com/gh_mirrors/co/context-hub点击查看免费下载相关推荐eslint-plugin-promise 在 ESLint 中的配置实战基于 Context Hub 文档的完整指南eslint plugin promise 在 ESLint 中的配置实战基于 Context Hub 文档的完整指南 本文以 Context Hub 仓库中context-hub 中的 eslint-plugin-import 配置指南flat 配置、TypeScript 解析器与 import 规则实战context hub 中的 eslint plugin import 配置指南flat 配置、TypeScript 解析器与 import 规则实战 eslcontext-hub 中的 eslint-plugin-jest 配置指南Flat Config、Legacy Config 与版本感知规则context hub 中的 eslint plugin jest 配置指南Flat Config、Legacy Config 与版本感知规则 本篇基于 co上一篇视频字幕提取终极指南5分钟本地提取完美SRT字幕文件下一篇小红书批量下载终极指南XHS-Downloader完整使用教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考