VS Code에서 코드 스니핏(Snippet) 사용하기

참고 문서

• Visual Studio Code: Snippets in Visual Studio Code
• Visual Studio Code: Langue Identifiers

이 문서의 내용

코드 스니펫(Snippet)이란?

스니펫(Snippet)은 IDE에서 코드 작성 편의성을 위해 제공하는 기능 중 하나입니다(코드 스니펫, 코드 조각 등으로 부릅니다).

IDE에서 스니펫은 특정 단축키 또는 코드 패턴의 조합을 통해 미리 정의된 코드 템플릿을 불러오는 기능입니다.

스니펫은 하나의 설정 파일로 구성 및 배포되어 프로젝트의 작업 효율성을 높이기 위한 도구로도 사용됩니다.

빌트인 스니펫(Built-in Snippet)

VS Code에서는 자체적으로 사용 가능한 내장 코드 조각-빌트인 스니펫(Built-in Snippet)을 제공합니다.

사용하는 언어에 따라서 지원되며 언어에 맞는 확장자 .java .cpp .css .html 등이 필요합니다.

위 예시는 .html 확장자 파일에서 HTML ! + Tab 단축키를 사용한 빌트인 스니펫 사용입니다.

기본적인 HTML 파일 구조가 완성되는 모습을 볼 수 있습니다.

추가로 Ctrl + P 단축키로 코드 네비게이션을 활성화 후 >Snippet: Insert Snippet으로 작성중인 언어의 스니펫을 제안 받는 방법이 있습니다.

사용자 스니펫(User Snippet) 생성

사용자 정의 코드 조각-사용자 스니펫(User Snippet)은 개발자에 의해서 등록된 스니펫입니다.

보통 자주 사용하는 코드 구조를 템플릿화 하기 위한 목적으로 사용됩니다.

Ctrl + P 단축키로 코드 네비게이션을 활성화 후 >Snippet: Configure User Snippets을 검색합니다.

• New Global Snippet file을 선택합니다. 현재 프로젝트를 위한 스니펫은 New Snippets file for <프로젝트>를 선택합니다.
• 스니펫 이름을 입력합니다. 예시에서는 MySnippet을 사용합니다.

이어서 <스니펫 이름>.code-snippet 이름의 파일이 생성되며 이곳에 JSON 형식으로 스니펫 템플릿을 작성하면 됩니다.

처음 주석 부분은 스니펫 사용에 대한 가이드입니다.

구분	비고
scope	스니펫이 활성화 될 수 있는 언어입니다. Visual Studio Code: Langue Identifiers를 참고합니다.
prefix	스니펫을 활성화하기 위한 단축키 또는 코드 패턴입니다.
body	스니펫으로 자동 생성되는 코드 템플릿 본문입니다. 이곳에 코드 또는 주석 등을 입력합니다.
description	스니펫에 대한 설명을 입력합니다. 이 설명 구문은 코드에서 스니펫이 선택되었을 때 표시됩니다.

예시의 스니펫은 다음과 같이 작성되었습니다.

{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	
	"My first user snippet": {
		"scope": "cpp",
		"prefix": "comments",
		"body": [
			"// my first user snippet for comments"
		],
		"description": "snippet for test comments"
	}
}

스니펫을 작성하였다면 파일을 저장하고 소스 파일로 돌아옵니다.

코드에서 미리 정의된 스니펫 활성 패턴 prefix를 입력하면 사용자 정의  스니펫이 표시됩니다.

사용자 스니펫 삭제

Ctrl + P 단축키로 코드 네비게이션을 활성화 후 >Snippet: Configure User Snippets을 검색합니다.

이전에 작성한 사용자 스니펫을 선택(예시에서는 MySnippet.code-snippets 파일)합니다.

에디터에서 스니펫 파일을 마우스 우클릭 | Reveal in File Explorer 선택하고 해당 스니펫 파일을 삭제합니다.

Windows 10 OS에서 스니펫 파일이 관리되고 있는 경로는 다음과 같습니다.

C:\Users\<사용자>\AppData\Roaming\Code\User\snippets

정리 및 복습

• 스니펫(Snippet)은 특정 단축키 또는 코드 패턴을 입력하여 미리 정의된 코드 템플릿을 불러오는 기능입니다.
• IDE에서 언어 별로 제공하는 빌트인 스니펫(Built-in Snippet)을 사용 할 수 있습니다.
• 사용자 정의 스니펫(User Snippet)을 추가로 정의하는 것도 가능합니다.