🎯 Visual Studio Code(VS Code) 스니펫 작성 가이드

슘·2024년 12월 10일

vscode 개발팁 스니펫 코드생산성

🎯 개발 가이드

목록 보기

2/3

VS Code의 스니펫(Snippet) 기능을 사용하면 반복적인 코드 작성 시간을 절약하고, 코드의 일관성을 유지할 수 있습니다. 아래는 스니펫 작성 방법과 활용법에 대한 정리입니다.

1. 스니펫이란?

스니펫은 코드 조각을 자동으로 입력할 수 있는 기능입니다.
키워드 입력 후 탭(Tab)을 누르면 해당 키워드에 연결된 코드 조각이 자동으로 완성됩니다.

2. 스니펫 생성 위치

전역(Global) 스니펫: 모든 프로젝트에서 사용 가능.
- File > Preferences > User Snippets에서 생성.
워크스페이스(Workspace) 스니펫: 특정 프로젝트에서만 사용.
- 프로젝트 루트의 .vscode/ 폴더에 저장된 스니펫 파일.

3. 스니펫 작성 방법

3.1 기본 구조

스니펫은 JSON 형식으로 작성됩니다.

{
  "스니펫 이름": {
    "prefix": "trigger",          // 키워드
    "body": [                    // 코드 내용
      "코드 라인 1",
      "코드 라인 2"
    ],
    "description": "설명"         // (선택) 스니펫 설명
  }
}

3.2 예제: 콘솔 로그 스니펫

console.log를 빠르게 입력하는 스니펫:

{
  "Console Log": {
    "prefix": "clg",
    "body": ["console.log('$1');"],
    "description": "Insert a console.log statement"
  }
}

Trigger: clg 입력 후 Tab 키.
완성 결과:

console.log('');

3.3 동적 값 및 커서 위치

변수 사용 ($)

$1, $2 등으로 커서의 위치를 지정할 수 있습니다.
${N:default} 형태로 기본값을 지정할 수 있습니다.

{
  "Function Template": {
    "prefix": "func",
    "body": [
      "function ${1:functionName}(${2:args}) {",
      "  $0",
      "}"
    ],
    "description": "Insert a function template"
  }
}

Trigger: func 입력 후 Tab.
완성 결과

function functionName(args) {
  
}

3.4 반복 텍스트 (${N|option1,option2,...|})

반복 텍스트 선택 가능:

{
  "For Loop": {
    "prefix": "forloop",
    "body": [
      "for (let ${1:i} = 0; ${1} < ${2:10}; ${1}++) {",
      "  console.log(${1});",
      "}"
    ],
    "description": "Insert a for loop"
  }
}

Trigger: forloop 입력 후 Tab.
완성 결과

for (let i = 0; i < 10; i++) {
  console.log(i);
}

4. 스니펫 관리 방법

4.1 스니펫 파일 생성

단축키: Ctrl+Shift+P → Preferences: Configure User Snippets 선택.
사용할 언어 또는 New Global Snippets File 선택.
생성된 JSON 파일에 스니펫 추가.

4.2 스니펫 파일 위치

전역 스니펫 파일:
- OS별 위치:

		>Windows: %APPDATA%\Code\User\snippets
		>macOS: ~/Library/Application Support/Code/User/snippets
		Linux: ~/.config/Code/User/snippets

워크스페이스 스니펫 파일: .vscode/ 폴더에 저장.

5. 유용한 스니펫 예제

React 컴포넌트

{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "const ${1:ComponentName} = (${2:props}) => {",
      "  return (",
      "    <div>",
      "      ${3:/* content */}",
      "    </div>",
      "  );",
      "};",
      "",
      "export default ${1:ComponentName};"
    ],
    "description": "Create a React functional component"
  }
}

HTML 기본 구조

{
  "HTML Boilerplate": {
    "prefix": "html5",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"${1:en}\">",
      "<head>",
      "  <meta charset=\"UTF-8\">",
      "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "  <title>${2:Document}</title>",
      "</head>",
      "<body>",
      "  $0",
      "</body>",
      "</html>"
    ],
    "description": "Basic HTML5 boilerplate"
  }
}

6. 스니펫 활용 팁

프로젝트별 스니펫: 팀 프로젝트에 필요한 스니펫을 공유하려면 .vscode/snippets.json에 저장.
코드 일관성: 동일한 코드 스타일을 유지하는 데 유용.
생산성 향상: 반복 작업을 자동화해 개발 시간을 절약.

슘

주니어 프론트엔드 성장기 기록기록

이전 포스트

🎯 Git Commit Message 작성 가이드

다음 포스트