Storybook全局配置autodocs不生效，单组件配置正常求解决方案

问题背景 #

我拥有一套Storybook设计系统，希望全局批量生成autodocs。按照官方指引在preview.ts中配置了tags: ['autodocs']，但全局配置未生效，仅在单个组件的Meta部分手动添加tags: ['autodocs']时，该组件才能正常生成文档。当前使用的开发依赖版本为：@storybook/addon-docs ^8.0.6、@storybook/addon-essentials ^8.0.6。

解决办法 #

1. 调整全局配置方式（适配Storybook 8+） #

Storybook 8中，全局启用autodocs的正确方式是通过parameters.docs.autodocs参数配置，而非直接在preview根节点添加tags数组。修改preview.ts如下：

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    viewport: {
      viewports: { ...customViewports }
    },
    docs: {
      theme: create({
        base: 'light',
        fontBase: '"Open Sans", sans-serif'
      }),
      // 全局启用自动文档：
      // 'always'：强制为所有组件生成文档
      // 'tag'：仅为带有autodocs标签的组件生成（全局配置后默认所有组件继承该标签）
      autodocs: 'always'
    }
  }
};

export default preview;

2. 验证插件与依赖配置 #

• 确认main.ts中已正确引入@storybook/addon-essentials（该插件已包含@storybook/addon-docs，无需单独添加）：

const config = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-essentials'],
  // 其他框架相关配置
};

export default config;

• 修正package.json中devDependecies的拼写错误为devDependencies，避免潜在的依赖识别问题。

3. 排查局部配置冲突 #

若仍有组件未生成文档，检查对应组件的Meta配置是否存在tags: []或docs.autodocs: false这类显式禁用配置，局部配置会覆盖全局设置，需移除或调整。

内容的提问来源于stack exchange，提问作者MacGregor