Storybook 7添加教程代码片段遇格式与Lint问题求解决方案

一、解决Linter错误与格式问题 #

1. 修复“预期XML元素”错误 #

这类错误多是ESLint将MDX文件中的代码块误判为XML内容导致，解决步骤：

• 安装MDX的ESLint插件：npm install eslint-plugin-mdx --save-dev
• 在.eslintrc.json中配置MDX规则：

  {
    "extends": ["plugin:mdx/recommended"],
    "overrides": [
      {
        "files": ["*.mdx"],
        "parser": "eslint-plugin-mdx"
      }
    ]
  }
  

• 确保MDX中的代码块用正确语法包裹，比如用```javascript明确标记代码语言，避免语法混淆。

2. 优化代码格式 #

用Prettier配合MDX插件自动规范代码格式：

• 安装依赖：npm install prettier prettier-plugin-mdx --save-dev
• 在.prettierrc中添加MDX支持：

  {
    "plugins": ["prettier-plugin-mdx"]
  }
  

运行Prettier后，代码块的缩进、换行将自动标准化。

二、通过导入方式展示代码（无需复制粘贴） #

Storybook 7支持多种导入代码的方式，避免手动复制带来的维护问题：

1. 导入原始代码文件内容 #

利用模块的?raw后缀直接导入文件原始文本，在MDX中展示：

import fullWidthCode from './FullWidth.stories.js?raw';

```javascript
{fullWidthCode}

- 注意：Vite默认支持`?raw`导入；若使用Webpack，需配置`raw-loader`或设置`module: { rules: [{ test: /\.stories\.js$/, type: 'asset/source' }] }`。

### 2. 关联Story自动展示代码
使用`Source`组件直接关联目标Story，自动同步展示其代码：
```mdx
import { Source } from '@storybook/addon-docs';
import { FullWidth } from './FullWidth.stories.js';

<Source of={FullWidth} language="javascript" />

这种方式会自动获取FullWidth Story的代码，后续Story代码更新时，文档片段也会同步更新，无需手动修改。

3. 用Code组件灵活展示 #

通过@storybook/addon-docs的Code组件，自定义代码展示样式：

import { Code } from '@storybook/addon-docs';
import fullWidthCode from './FullWidth.stories.js?raw';

<Code language="javascript" title="FullWidth Story 代码">
  {fullWidthCode}
</Code>

三、额外配置检查 #

确保已安装@storybook/addon-docs并在.storybook/main.js中启用：

export default {
  addons: ['@storybook/addon-docs'],
};

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