User Snippets

(맥북기준) vsc에서 command+shift+p를 누르고 user snippets 설정에 들어가서 코드 조각 파일 중

typescript react를 클릭하시면 파일이 생성됩니다.

그 파일 안에 아래 코드를 복사 붙여넣기 하시면 됩니다.


{
"스토리북 기본 설정": {
    "prefix": "strc",
    "body": [
      "import React from 'react';",
      "import { ComponentStory, ComponentMeta } from '@storybook/react';",
      "import ${1:${TM_FILENAME_BASE/(.*)\\..+$/$1/}} from './${1:${TM_FILENAME_BASE/(.*)\\..+$/$1/}}';",
      "",
      "export default {",
      "title: 'Components/${1:${TM_FILENAME_BASE/(.*)\\..+$/$1/}}',",
      "component: ${1:${TM_FILENAME_BASE/(.*)\\..+$/$1/}},",
      "argTypes: {",

      "},",
      "} as ComponentMeta<typeof ${1:${TM_FILENAME_BASE/(.*)\\..+$/$1/}}>;",
      "export const Default: ComponentStory<typeof ${1:${TM_FILENAME_BASE/(.*)\\..+$/$1/}}> = (args) => {",
      "  return <${1:${TM_FILENAME_BASE/(.*)\\..+$/$1/}} {...args}></${1:${TM_FILENAME_BASE/(.*)\\..+$/$1/}}>;",
      "};"
    ]
  }
}

사용방법은 아래 그림과 같이 ~.stories.tsx에서 strc라고 작성하시면 아래와 같이 뜹니다.