VSCode에서 익스텐션 설치없이 스니펫(Snippet)을 사용하는 방법을 정리해보았다.

VSCode 스니펫 사용법

1. 스니펫 파일 만들기

1. ctrl + shift + P로 전체 설정 탐색기를 켠 다음 ‘Snippets: Configure Snippets’ 선택
2. 전역 스니펫을 설정할 경우 ‘New Global Snippets file’ 선택
3. 스니펫 설정 파일 이름 입력
4. 생성 완료

2. 스니펫 내용 작성

1. snippet generator 페이지 접속
2. 스니펫 내용 작성 후 copy

• Description… : 스니펫의 간단한 설명(인텔리센스에 뜸)
• Tab trigger… : 스니펫을 불러올 때 쓸 단어
• Your snippet… : 스니펫 코드 ※ 스니펫을 생성한 후 커서(placeholder) 위치를 지정하고 싶다면, 해당 코드를 선택한 후 ctrl+i 혹은 ${1:코드} 문법으로 작성 ($1, $2, $3 순서대로 Tab 키를 누를 때마다 커서 이동, $0은 마지막으로 커서가 위치할 지점)

3. 스니펫 파일에 내용 붙여넣기

1. 파일 내 주석 부분에 내용 붙여넣기
2. 저장

4. 스니펫 사용

1. 지정한 단어를 입력한 후
2. 엔터!

5. 추가 팁

• 전역 스니펫 파일(.code-snippets)을 만들 때, 특정 언어에서만 나타나게 하려면 scope 속성 추가
• 스니펫 예시

{
	"react function component": {
		"prefix": "rfc",
		"scope": "javascript,typescript,javascriptreact,typescriptreact",
		"body": [
			"export default function ${1:App}() {",
			"  return(",
			"    ${2:<>$0</>}",
			"  );",
			"}"
		],
		"description": "react function component"
	}
}