VSCode Custom Snippet 만들기

Windows와 큰 차이가 없겠지만 해당 내용은 Mac VSCode@1.66.1 버전으로 작성되었습니다.

custom code snippet

위와 같은 순서를 입력 시 설정한 이름으로 된 json파일이 생성된다.

이제 이곳에 내가 원하는 스니펫을 생성하면 된다.

{
  "snippetName": {
    "prefix": "tsc", // 해당 스니펫을 불러올 명령어를 입력한다.
    "body": [""], // 스니펫을 통해 불러오고 싶은 내용을 문자열로 ','을 구분으로 입력한다.
    "description": "my typescript snippet" // 해당 스니펫의 설명을 입력한다.
    "scope": "typescriptreact, typescript", // (선택사항) 해당 스니펫을 사용할 수 있는 파일형식을 입력한다.
  }
}

크게 위와 같은 방법으로 스니펫을 생성하면 되며, body내부에 값을 입력하기가 불편하다.

그러니 snippet generator (snippet-generator.app)와 같은 사이트를 통해 제작하는 게 편리하다.

{
  "tsc": {
    "scope": "typescriptreact, typescript",
    "prefix": "tsc",
    "body": [
      "import React from 'react';",
      "",
      "const ${1:${TM_FILENAME_BASE/([a-z])/${1:/upcase}/}} = (): React.ReactElement => {",
      "  const title = '${1:${TM_FILENAME_BASE/([a-z])/${1:/upcase}/}}';",
      "  return <div>{title}</div>;",
      "};",
      "",
      "export default ${1:${TM_FILENAME_BASE/([a-z])/${1:/upcase}/}};"
    ],
    "description": "typescript my snippet"
  }
}

최종적으로 위와 같은 방법으로 개인적인 나의 스니펫 생성이 끝났다.

위에 ${1:}이나 TM_FILENAME_BASE와 같은 것의 자세한 내용은 Snippets in Visual Studio Code에서 모두 확인할 수 있다.

실제 사용 예시