storybook 코드 치는 거 반복 노가다이기 때문에 snippet 만들었다.

사용 방법

  1. vscode에서 shift + ctrl + p

  2. Snippets: Configure Snippets 선택

    image.png

  3. storybook 입력 후 파일 생성

    image.png

  4. 아래 코드를 해당 파일에 입력

    image.png

    {
  "Storybook MyComponent Snippet": {
    "prefix": "sb",
    "body": [
      "import { Meta, StoryObj } from '@storybook/react';",
      "import ${1:MyComponent} from './${1:MyComponent}';",
      "",
      "const meta: Meta<typeof ${1:MyComponent}> = {",
      "  title: 'Category/${1:MyComponent}',",
      "  component: ${1:MyComponent},",
      "  parameters: {",
      "    layout: 'centered',",
      "  },",
      "  tags: ['autodocs'],",
      "};",
      "",
      "export default meta;",
      "",
      "type Story = StoryObj<typeof ${1:MyComponent}>;",
      "",
      "export const Default: Story = {",
      "  args: {",
      "    // propsname: value,",
      "  },",
      "};",
    ],
    "description": "Create a Storybook story for MyComponent."
  }
}

  5. sb치면 storybook snippet 완성된다.

    image.png