시간을 소중히 해주는 snippet 사용하기

vscode snippet 당신의 시간을 소중히 해주는 snippet 사용하기

1. snippets 설정 접근하기

접근방법 1. cmd + shift + p 를 통해 아래와 같이 snippets에 들어가기

접근방법 2. code - preferences - configure user snippets 로도 접근 가능

2. 설정할 언어 입력

필자는 typescriptreact.json 을 사용하므로 typescriptreact.json에 내용을 작성을 했다.

3. 자신만의 커스텀 스니펫 작성

snippet-generator.app/ 에서 간단하게 작성 가능하다.

${TM_FILENAME_BASE}은 생성된 해당 파일의 이름이다.

• Description은 스니펫을 간단하게 설명하는 부분
• Tab trigger는 스니펫을 불러온 단어

아래는 필자의 comp snippet

"create component": {
        "prefix": "comp",
        "body": [
          "const ${TM_FILENAME_BASE} = () => {",
          "  return (",
          "    <div>",
          "      ${TM_FILENAME_BASE}",
          "    </div>  ",
          "  )",
          "}",
          "",
          "export default ${TM_FILENAME_BASE}"
        ],
        "description": "create component"
      }

4. 사용하기

설정한 Trigger를 입력해주면 다음과 같이 나오고

바로 Enter를 눌러준다.

더 세세하게 snippet을 이용하려면 아래 링크에서 확인

https://code.visualstudio.com/docs/editor/userdefinedsnippets