VS Code User Snippets 실전 가이드: 반복 코드를 한 번에 입력하기

VS Code 실무 활용 시리즈

VS Code User Snippets로
반복 코드를 한 번에 입력하기

자주 쓰는 코드 템플릿에 입력 위치·선택지·파일명·날짜까지 넣는 실전 자동화 가이드

매번 같은 로그문, 테스트 구조, 파일 머리말을 복사해 붙이고 있나요? VS Code의 User Snippets를 만들면 짧은 접두어 하나로 여러 줄의 코드를 넣고, 필요한 값만 순서대로 바꿀 수 있습니다. 개인용뿐 아니라 프로젝트에 저장해 팀과 공유할 수도 있습니다.

목차

1. Snippets의 개념과 사용 시점
2. 핵심 단축키와 실행 방법
3. 첫 User Snippet 만들기
4. Snippet 문법 이해하기
5. 실전 예제 1: 값이 이동하는 로그 템플릿
6. 실전 예제 2: 팀 공유 테스트 템플릿
7. 파일명·날짜·변환 기능 활용
8. 범위와 추천 목록 정리하기
9. 주의점과 문제 해결
10. 15분 연습 과제

한 줄 요약 Snippet은 반복되는 코드 패턴을 저장해 두고 접두어로 불러오는 템플릿입니다. 단순 붙여넣기와 달리 여러 입력 위치를 순서대로 이동하고, 같은 값을 동시에 수정하거나 파일·워크스페이스 정보를 자동 삽입할 수 있습니다. VS Code Snippets 공식 문서

1. Snippets는 언제 쓰면 좋을까?

반복 횟수가 많고 형태는 일정하지만 일부 값만 매번 달라지는 코드가 가장 좋은 대상입니다.

• 로그 메시지, 예외 처리, API 응답 구조를 자주 입력할 때
• 테스트의 Arrange–Act–Assert 뼈대를 반복해서 만들 때
• React 컴포넌트나 클래스의 기본 구조를 빠르게 시작할 때
• 파일 머리말에 파일명·날짜·작성 위치를 자동으로 넣고 싶을 때
• 팀이 같은 코드 템플릿과 이름 규칙을 사용해야 할 때

좋은 Snippet의 기준 모든 코드를 Snippet으로 만들 필요는 없습니다. 일주일에 여러 번 반복하고, 템플릿을 사용해도 의미가 명확한 코드부터 시작하세요.

2. 핵심 단축키와 실행 방법

기능	Windows	macOS	설명
IntelliSense 제안 열기	Ctrl + Space	⌃ + Space	현재 언어에서 사용할 수 있는 Snippet 확인
명령 팔레트 열기	Ctrl + Shift + P	⇧ + ⌘ + P	Insert Snippet·Configure Snippets 실행
다음 입력 위치로 이동	Tab	Tab	$1부터 번호순으로 이동하고 마지막에 $0으로 종료
키보드 단축키 편집기	Ctrl + K, Ctrl + S	⌘ + K, ⌘ + S	특정 Snippet에 사용자 단축키 지정

Snippets는 IntelliSense 제안 안에 다른 완성 항목과 함께 표시됩니다. 공식 기본값에서 Trigger Suggest는 Windows Ctrl+Space, macOS ⌃+Space입니다. 공식 기본 단축키 목록

3. 첫 User Snippet 만들기

1. Windows는 Ctrl+Shift+P, macOS는 ⇧+⌘+P로 명령 팔레트를 엽니다.
2. Snippets: Configure Snippets를 실행합니다.
3. JavaScript 전용이면 javascript.json, TypeScript 전용이면 typescript.json을 선택합니다.
4. 여러 언어에서 사용할 개인용 Snippet이라면 New Global Snippets file을 선택합니다.
5. 아래와 같은 JSON을 저장한 뒤 대상 코드 파일로 돌아갑니다.

{
  "Simple console log": {
    "prefix": "clg",
    "body": "console.log($1);$0",
    "description": "Insert console.log"
  }
}

이제 JavaScript 파일에서 clg를 입력하고 IntelliSense 제안에서 Snippet을 선택합니다. $1 위치에 커서가 놓이고, Tab을 누르면 $0 위치에서 Snippet 입력이 끝납니다. Snippet 파일은 JSON 형식이며 C 스타일 주석도 지원합니다. 사용자 Snippet 생성 공식 안내

4. 꼭 알아야 할 Snippet 문법

문법	의미	예시
$1, $2	번호순으로 이동하는 입력 위치	function $1($2)
$0	항상 마지막에 방문하는 종료 위치	return $0
${1:기본값}	기본 텍스트가 있는 입력 위치	${1:name}
${1|a,b,c|}	목록에서 하나를 선택	${1|GET,POST,PUT|}
같은 번호 반복	한 곳을 수정하면 같은 번호가 함께 변경	$1 = validate($1)
$TM_FILENAME	현재 파일 이름 자동 삽입	// $TM_FILENAME

입력 위치는 1부터 오름차순으로 이동하고, 0은 마지막 위치입니다. Placeholder, 선택 목록, 변수와 변환의 전체 문법은 Snippet syntax 공식 문서에서 확인할 수 있습니다.

5. 실전 예제 1: 값이 이동하는 로그 템플릿

레이블과 출력 값을 차례로 입력하는 JavaScript·TypeScript 공용 Snippet입니다. 전역 .code-snippets 파일에 넣습니다.

{
  "Labeled console log": {
    "scope": "javascript,typescript",
    "prefix": "clabel",
    "body": [
      "console.log('${1:label}:', ${2:value});",
      "$0"
    ],
    "description": "Insert a labeled console log"
  }
}

1. JavaScript 또는 TypeScript 파일에서 clabel을 입력합니다.
2. Windows Ctrl+Space 또는 macOS ⌃+Space로 제안을 열고 Snippet을 선택합니다.
3. 첫 입력 위치에서 orderId를 입력합니다.
4. Tab을 누르고 두 번째 위치에 order.id를 입력합니다.
5. 다시 Tab을 눌러 다음 줄의 $0 위치로 이동합니다.

console.log('orderId:', order.id);

핵심 Snippet의 장점은 코드를 빨리 넣는 것뿐 아니라, 사용자가 반드시 바꿔야 할 위치를 순서대로 안내한다는 점입니다.

6. 실전 예제 2: 팀 공유 테스트 템플릿

프로젝트 구성원이 함께 사용할 Snippet은 프로젝트 루트의 .vscode 폴더에 .code-snippets 파일로 저장합니다. 다음 예제는 TypeScript 테스트 파일에서만 제안됩니다.

{
  "Team test block": {
    "scope": "typescript",
    "include": ["**/*.test.ts", "**/*.spec.ts"],
    "prefix": "tcase",
    "body": [
      "test('${1:description}', async () => {",
      "\t// arrange",
      "\t${2:const input = undefined;}",
      "",
      "\t// act",
      "\t${3:const result = await subject(input);}",
      "",
      "\t// assert",
      "\t${4:expect(result).toBeDefined();}",
      "\t$0",
      "});"
    ],
    "description": "Insert team Arrange-Act-Assert test"
  }
}

1. Snippets: Configure Snippets를 실행합니다.
2. New Snippets file for '<프로젝트명>'을 선택합니다.
3. 파일 이름을 team.code-snippets로 지정하고 위 내용을 저장합니다.
4. sample.test.ts에서 tcase를 실행해 네 입력 위치를 채웁니다.
5. 파일을 Git에 커밋해 팀과 공유합니다.

include와 exclude는 파일 이름 또는 glob 패턴으로 Snippet이 보일 위치를 좁힙니다. 두 패턴에 모두 일치하면 exclude가 우선합니다. 프로젝트 Snippet 공식 안내 · 파일 패턴 범위 공식 안내

7. 파일명·날짜·변환 기능 활용

Snippet 변수로 현재 파일과 날짜 정보를 자동 입력할 수 있습니다. 다음은 파일 머리말 예제입니다.

{
  "File header": {
    "prefix": "filehead",
    "body": [
      "// File: $TM_FILENAME",
      "// Created: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}",
      "// Workspace: $WORKSPACE_NAME",
      "",
      "$0"
    ],
    "description": "Insert file metadata header"
  }
}

변수	삽입 값
TM_FILENAME	확장자를 포함한 현재 파일 이름
TM_FILENAME_BASE	확장자를 제외한 현재 파일 이름
RELATIVE_FILEPATH	열린 워크스페이스 기준 상대 경로
WORKSPACE_NAME	현재 워크스페이스 또는 폴더 이름
CURRENT_YEAR·CURRENT_MONTH·CURRENT_DATE	현재 연·월·일
CLIPBOARD	현재 클립보드 내용

VS Code 1.108에는 파일명 같은 변수 값을 snake_case 또는 kebab-case로 바꾸는 변환이 추가됐습니다.

{
  "Kebab file name": {
    "prefix": "kname",
    "body": "${TM_FILENAME_BASE/(.*)/${1:/kebabcase}/}$0",
    "description": "Insert file name as kebab-case"
  }
}

예를 들어 OrderSummary.ts에서 실행하면 order-summary가 삽입됩니다. 이 두 변환은 VS Code 1.108 이상에서 사용하세요. VS Code 1.108 공식 릴리스 노트

8. 범위와 추천 목록 정리하기

저장 위치	적용 범위	추천 용도
언어별 사용자 Snippet	내 환경의 특정 언어	개인용 JavaScript·Python 템플릿
전역 .code-snippets	내 환경의 여러 언어	공통 주석·문서 머리말
프로젝트 .vscode/*.code-snippets	현재 프로젝트 구성원	팀 규칙·테스트·프레임워크 템플릿

Snippet이 다른 IntelliSense 항목에 묻힌다면 editor.snippetSuggestions를 top으로 설정할 수 있습니다. 기본값은 inline이며, bottom 또는 none도 지원합니다. IntelliSense의 Snippet 표시 순서 공식 문서

{
  "editor.snippetSuggestions": "top",
  "editor.tabCompletion": "on"
}

editor.tabCompletion을 켜면 접두어를 입력한 뒤 Tab으로 Snippet을 바로 삽입할 수 있습니다. 다만 일반 들여쓰기와 혼동될 수 있으므로 먼저 IntelliSense 방식에 익숙해진 후 사용하는 편이 좋습니다. Tab completion 공식 안내

9. 주의점과 문제 해결

• 제안에 보이지 않을 때: 현재 파일의 언어 모드와 Snippet의 scope, include, exclude를 확인합니다.
• JSON 오류: 쉼표·큰따옴표·백슬래시가 잘못되면 Snippet 전체가 작동하지 않을 수 있습니다. Problems 패널의 JSON 오류부터 해결하세요.
• 달러 기호 삽입: 코드 자체에 달러 기호가 필요하다면 Snippet 확장으로 해석되지 않도록 공식 문서의 이스케이프 규칙을 확인합니다.
• 접두어 충돌: 너무 짧은 log 같은 이름보다 clabel, tcase처럼 의미 있고 구체적인 접두어가 좋습니다.
• 팀 공유 범위: 프로젝트 Snippet에는 개인 경로·사용자 이름·비밀값을 넣지 마세요.
• 과도한 템플릿: 큰 비즈니스 로직을 Snippet으로 복제하면 유지보수가 어려워집니다. 공통 로직은 함수나 모듈로 재사용하세요.

Snippet과 코드 생성기의 경계 짧고 안정적인 뼈대는 Snippet에 적합합니다. 프로젝트 구조 전체를 만들거나 의존성까지 바꾸는 작업은 별도 스캐폴딩 도구가 더 안전합니다.

10. 15분 연습 과제

1. 3분: 현재 자주 입력하는 한 줄 코드를 골라 접두어가 있는 개인 Snippet을 만듭니다.
2. 3분: 해당 Snippet에 ${1:기본값}과 $0을 추가하고 Tab 이동을 확인합니다.
3. 3분: 선택 목록 문법으로 로그 수준 debug·info·warn 중 하나를 고르게 만듭니다.
4. 3분: TM_FILENAME과 날짜 변수를 사용한 파일 머리말 Snippet을 만듭니다.
5. 3분: 프로젝트용 .code-snippets 파일에 테스트 템플릿을 만들고 include로 테스트 파일에만 표시되게 합니다.

완료 기준 접두어 입력 → 제안 선택 → 입력 위치 수정 → Tab 이동 → 최종 위치 종료 흐름을 자연스럽게 실행하고, 개인용과 프로젝트용 Snippet의 저장 범위를 구분할 수 있으면 충분합니다.

공식 자료

• Snippets in Visual Studio Code
• IntelliSense
• Default keyboard shortcuts reference
• VS Code 1.108 Release Notes

공식 문서와 공식 릴리스 노트를 2026년 7월 23일 기준으로 확인해 작성했습니다.