시간을 소중히 해주는 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