Storybook 插件 VSCode 源代码

一个简单的 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. 开始编写您的故事

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

有两个可能的参数

参数	描述	值
componentPath	故事中使用的组件的路径	组件文件的绝对路径或相对于根目录的路径
storyPath	故事文件的路径，假设故事和组件位于同一个文件夹中，并且命名约定为 - 组件：`Button.js` 和故事：`Button.stories.js`	故事文件的绝对路径或相对于根目录的路径

以上两个参数之一是必须的，如果没有这些参数，插件将消失。

示例故事

组件级参数

// 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 />);

故事级参数

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',
  },
};

故事的路径 - `storyPath`

注意：此参数仅在故事和相应的组件位于同一个文件夹中，并且具有相同名称时使用。假设组件位于 `src/Button/Button.js` 文件中，并且故事位于 `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',
  },
};