Storybook VSCode Source 插件

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

入门

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

1. 安装开发依赖

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

注意：我们使用 babel-plugin-macros 和 paths.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',
  },
};