vscode 스니펫 만들기 및 스니펫 공유

코드 스니펫은 반복되는 코드 패턴을 빠르게 입력할 수 있는 템플릿입니다. 스니펫을 적절히 사용하면 보일러 플레이트 입력 등의 반복 작업을 빠르고 손쉽게 끝낼 수 있습니다.

vscode를 이용하시는 개발자라면 위 사진과 같은 에디터에서 제공하는 자동완성 기능을 사용해보신 경험이 있으실 겁니다. 이 자동완성 기능의 정확한 명칭이 스니펫 인데요. vscode에서 기본적으로 제공해주는 스니펫을 빌트인 스니펫 이라고 합니다. 사실 우리는 늘 스니펫을 사용하고 있었습니다.

빌트인 스니펫이 있다면 사용자 지정 스니펫도 있을 것 같지요? 네! 그렇습니다. vscode는 빌트인 스니펫 외에도 직접 본인의 스니펫을 만들어 사용할 수 있도록 가이드를 제공합니다. 사용자 지정 스니펫 생성에 대한 자세한 내용은 vscode 공식문서 유저 가이드 중 snippets 부분(클릭하시면 해당 링크로 이동합니다.) 을 확인하시면 되는데요. 다루는 내용이 상당히 방대하지만 그만큼 다양한 기능을 제공하기 때문에 한번 훑어볼만한 가치가 있습니다.

초간단 스니펫 만들기

그럼 간단한 방법으로 나만의 스니펫을 만들어볼까요? 먼저 프로젝트의 메인 디렉토리에 .vscode 디렉토리를 만들어주시고, app.code-snippets 파일을 추가로 만들어주세요.

그리고 app.code-snippets 파일 내부에 아래 소스코드를 붙여넣기 해봅시다.

// app.code-snippets
{
  "Hello Snippets!": {
    "prefix": ["hello", "hello-snippets"],
    "body": [
      "import fs from 'fs'",
      "",
      "// 현재년 : ${CURRENT_YEAR}",
      "// 현재월 : ${CURRENT_MONTH}",
      "// 파일명 : ${TM_FILENAME}",
      "// 현재 클립보드 : ${CLIPBOARD}",
    ],
    "description": "스니펫을 처음 만들어보았습니다!",
  },
}

"Hello Snippets!" 은 스니펫의 이름입니다.
prefix는 스니펫을 표시하는 하나 이상의 트리거 단어를 정의합니다. prefix에 대해 하위 문자열 일치가 수행됩니다. 가령 "fc"는 "for-const"와 일치할 수 있습니다.
body는 하나 또는 그 이상의 컨텐츠 라인이며, 삽입 시 여러 줄로 연결됩니다. 위의 코드는 빈 줄 포함 총 6줄이 됩니다.
description은 스니펫을 설명하는 문구이며, 스니펫 사용 시 vscode에 의해 보여질 수 있습니다. 반드시 입력할 필요는 없습니다. (선택사항)

완성이 되었다면 아래와 같이 사용해봅시다!

너무 쉽지요?

사용중인 커스텀 코드 스니펫 공유

이제 제가 사용중인 커스텀 코드 스니펫을 공유드리도록 하겠습니다. 저는 아래 스니펫을 사용할 때마다 각 프로젝트에 맞게 조금씩 커스터마이징을 해서 사용을 하고 있습니다. 따라서 이 스니펫을 그냥 복붙해서 사용하시면 적절치 못할 가능성이 높습니다. 일단 코드를 가져가시되, 약간 커스터마이징해서 사용하시면 될 것 같습니다. 그리 어렵지 않습니다.

Next.js 전용 스니펫

Next.js의 컴포넌트, 페이지, 레이아웃을 빠르게 만들 수 있는 코드 스니펫입니다. :)

{
  "Next Component": {
    "prefix": "fc",
    "body": [
      "import  { FunctionComponent, HTMLAttributes } from 'react'",
      "import { cn } from '@/lib/utils'",
      "",
      "interface ${TM_FILENAME_BASE/([a-z]*)-*([a-z]*)/${1:/capitalize}${2:/capitalize}/g}Props extends HTMLAttributes<HTMLDivElement> {",
      "}",
      "",
      "export const ${TM_FILENAME_BASE/([a-z]*)-*([a-z]*)/${1:/capitalize}${2:/capitalize}/g}: FunctionComponent<${TM_FILENAME_BASE/([a-z]*)-*([a-z]*)/${1:/capitalize}${2:/capitalize}/g}Props> = ({className, ...props}): JSX.Element => {",
      "  return <div className={cn(className)} {...props}>${TM_FILENAME_BASE/([a-z]*)-*([a-z]*)/${1:/capitalize}${2:/capitalize}/g}</div>",
      "}",
      ""
    ],
    "description": "Typescript React Function Component"
  },

  "Next Layout": {
    "prefix": "layout",
    "body": [
      "import type { Metadata } from 'next'",
      "import { FunctionComponent, PropsWithChildren } from 'react'",
      "",
      "export const metadata: Metadata = {",
      " title: 'Create Next App',",
      " description: 'Generated by create next app',",
      "}",
      "",
      "interface $1${TM_FILENAME_BASE/(.*)/${1:/capitalize}/g}Props extends PropsWithChildren {}",
      "",
      "const $1${TM_FILENAME_BASE/(.*)/${1:/capitalize}/g}: FunctionComponent<$1${TM_FILENAME_BASE/(.*)/${1:/capitalize}/g}Props> = ({children}) => {",
      "  return <>{children}</>",
      "}",
      "",
      "export default $1${TM_FILENAME_BASE/(.*)/${1:/capitalize}/g}"
    ],
    "description": "Nextjs Layout File"
  },

  "Next Page": {
    "prefix": "page",
    "body": [
      "import { FunctionComponent } from 'react'",
      "",
      "interface $1${TM_FILENAME_BASE/(.*)/${1:/capitalize}/g}Props {}",
      "",
      "const $1${TM_FILENAME_BASE/(.*)/${1:/capitalize}/g}: FunctionComponent<$1${TM_FILENAME_BASE/(.*)/${1:/capitalize}/g}Props> = ({$3}) => {",
      "  return <main>$1${TM_FILENAME_BASE/(.*)/${1:/capitalize}/g}</main>",
      "}",
      "",
      "export default $1${TM_FILENAME_BASE/(.*)/${1:/capitalize}/g}"
    ],
    "description": "Nextjs Page"
  }
}

마크다운 스니펫

블로그 작성에 사용할 마크다운의 프론트매터를 빠르고 정확하게 만들기 위해 작성한 코드 스니펫입니다.

{
  "Post Matter": {
    "prefix": ["matter", "---"],
    "description": "Output a file header with the file name and date",
    "body": [
      "---",
      "title: '$1'",
      "description: '$2'",
      "thumbnail: ''",
      "tags: []",
      "draft: false",
      "created_date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
      "---",
      "",
      "$0"
    ]
  },
  "Current DateTime": {
    "prefix": ["current_date_time", "cdt"],
    "description": "Output current DateTime YYYY-MM-DD HH:mm:ss",
    "body": "$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND"
  },
  "Current Date": {
    "prefix": ["current_date", "cd"],
    "description": "Output current Date YYYY-MM-DD",
    "body": "$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE"
  }
}

2DC BLOG