加入直播会话:美国东部时间周四上午 11 点,Storybook 9 发布及 AMA

一个简单的 Storybook 插件,可在 VS Code 中打开组件源代码

在 Github 上查看

Storybook VSCode Source 插件

一个简单的 storybook 插件,可直接打开组件的源文件。在本地/开发环境中,它会打开 vs code;在生产部署环境中,它会在 github 仓库中打开文件。

An animated gif of the addon

入门

先决条件:一个可工作的 Storybook 环境

1. 安装开发依赖

yarn add -D storybook-vscode-component babel-plugin-macros paths.macro

注意:我们使用 babel-plugin-macrospaths.macro 来方便地获取文件路径。如果您选择硬编码文件路径,这是可选的。

如果您正在使用 paths.macro,请确保在 .babelrc 中如下所示启用宏

// .babelrc
{
    "plugins": [
        "macros"
    ]
}

2. 将插件添加到 Storybook 配置中(.storybook/addon.js.storybook/main.js

//.storybook/addon.js [deprecated]
import 'storybook-vscode-component/register';

//       or

// .storybook/main.js
module.exports = {
  stories: [
    // ....
  ],
  addons: [
    '@storybook/addon-links',
    //...
    'storybook-vscode-component/register',
  ],
};

3. 在 storySource 参数下设置全局参数。

您可以设置三个全局参数

参数 描述
workingDir 当前工作/根目录的路径 必需
repository GitHub 仓库的 URL - 用于在 GitHub 中打开文件 可选
branch GitHub 仓库的默认分支 可选,默认指向 master
// .storybook/preview.js
import { wd } from 'paths.macro';

export const parameters = {
  storySource: {
    repository: 'https://github.com/example/repo-name',
    workingDir: wd || '/Usr/vilva/Desktop/project-name',
    branch: 'branch1',
  },
};

4. 开始编写您的 Stories

现在您可以开始编写您的 Stories 并传递 Story 级别或组件级别参数。

有两个可能的参数

参数 描述
componentPath Story 中使用的组件的路径 组件文件的绝对路径或文件相对于根目录的路径
storyPath Story 文件的路径,假定 Story 和组件位于同一文件夹中,并遵循命名约定 - 组件:Button.js,Story:Button.stories.js Story 文件的绝对路径或文件相对于根目录的路径

上述两个参数中的一个必须设置,否则插件将不会显示。

Stories 示例

组件级别参数
// Component level parameters
import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    storySource: {
      componentPath:
        '/src/Button/Button.js' ||
        '/Usr/vilva/Desktop/storybook/src/Button/Button.js',
    },
  },
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});

//  or

storiesOf('Button', module)
  .addParameters({
    storySource: {
      componentPath:
        '/src/Button/Button.js' ||
        '/Usr/vilva/Desktop/storybook/src/Button/Button.js',
    },
  })
  .add('Primary', () => <Button />);
Story 级别参数
import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    storySource: {
      componentPath:
        '/src/Button/Button.js' ||
        '/Usr/vilva/Desktop/storybook/src/Button/Button.js',
    },
  },
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});

Primary.parameters = {
  storySource: {
    componentPath: '/src/Button/Button.js',
  },
};
Story 的路径 - storyPath

注意:仅当 Story 及其对应的组件在同一文件夹中且名称相同时,才应使用此参数。假设组件文件在 src/Button/Button.js 中,则仅当 Story 文件在 src/Button/Button.stories.js 中时,此参数才会起作用。但它适用于所有类型的文件,.js.ts.tsx

import { Button } from './Button';
import { fileAbsolute } from 'paths.macro';

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    storySource: {
      componentPath:
        '/src/Button/Button.js' ||
        '/Usr/vilva/Desktop/storybook/src/Button/Button.js',
    },
  },
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});

Primary.parameters = {
  storySource: {
    storyPath:
      fileAbsolute ||
      '/Usr/vilva/Desktop/storybook/src/Button/Button.stories.js' ||
      '/src/Button/Button.stories.js',
  },
};