[Storybook] VSCode Snippet

컴포넌트 개발에 스토리북을 도입하면서, 스토리를 작성하는 템플렛이 필요했다. 이미 다양한 스토리북 확장 프로그램이 존재하지만, snippet이 스토리북 이전 버전 작성법에 맞춰져 있어 사용할 수 없었다. 프로젝트 폴더 내에서 사용할 스토리북 snippet 을 만들어보았다.

• snippet 설정 파일 만들기 : .vscode/확장자.code-snippets
  • NextJS(React) 를 사용하여 개발하고 있었기 때문에 stories.tsx.code-snippets 라는 파일을 만들었다.

• snippet 작성
  • prefix : 스니펫을 호출할 키워드, VSCode에서 prefix에 입력한 값을 입력 후 tab 키를 누르면 스니펫을 호출할 수 있다.
  • body : 스니펫 본문. 해당 내용이 스니펫의 내용이다. 스니펫 코드가 있다면, 해당 코드를 line별로 잘라서 (JSON 문자열의) 배열로 저장한다. (템플릿 파일을 GPT 한테 변환해달라고 하면 편리하다.)
    • 파일명에서 컴포넌트 이름을 추출하여 작성할 부분을 './${TM_FILENAME_BASE/(.*)\\.stories$/${1}/}'; 로 작성
  • 그 외의 자세한 설명은 이 링크를 참고

.vscode/stories.tsx.code-snippets

{
  "Storybook Component Template": {
    "prefix": "story",
    "body": [
      "import type { Meta, StoryObj } from '@storybook/react';",
      "",
      "import ${TM_FILENAME_BASE/(.*)\\.stories$/${1}/} from './${TM_FILENAME_BASE/(.*)\\.stories$/${1}/}';",
      "",
      "const meta: Meta<typeof ${TM_FILENAME_BASE/(.*)\\.stories$/${1}/}> = {",
      "  component: ${TM_FILENAME_BASE/(.*)\\.stories$/${1}/},",
      "  title: '${TM_FILENAME_BASE/(.*)\\.stories$/${1}/}',",
      "  tags: ['autodocs'],",
      "  argTypes: {},",
      "};",
      "export default meta;",
      "",
      "type Story = StoryObj<typeof ${TM_FILENAME_BASE/(.*)\\.stories$/${1}/}>;",
      "",
      "export const Default: Story = {",
      "  args: {},",
      "};"
    ],
    "description": "Storybook Template"
  }
}

• 이제 편리하게 스토리북 코드를 작성할 수 있다!!

References

VSCode에 코드 Snippet 작성하기