스니펫 가이드

Name: Visual Studio Code
Author: Microsoft

contributes.snippets 기여 포인트는 스니펫을 Visual Studio Code 확장으로 묶어 공유할 수 있도록 합니다.

스니펫 만들기 항목에는 스니펫을 만드는 모든 정보가 포함되어 있습니다. 이 가이드/샘플은 자신의 스니펫을 공유를 위한 확장으로 만드는 방법을 보여줍니다. 제안된 워크플로우는 다음과 같습니다.

스니펫: 사용자 스니펫 구성 명령을 사용하여 스니펫을 만들고 테스트합니다.
스니펫에 만족하면 전체 JSON 파일을 `snippets.json`과 같은 확장 폴더로 복사합니다.
package.json에 다음 스니펫 기여를 추가합니다.

{
  "contributes": {
    "snippets": [
      {
        "language": "javascript",
        "path": "./snippets.json"
      }
    ]
  }
}

팁: package.json에 다음 구성을 사용하여 확장을 스니펫 확장으로 태그 지정합니다.

{
  "categories": ["Snippets"]
}

전체 소스 코드는 다음에서 찾을 수 있습니다: https://github.com/microsoft/vscode-extension-samples/tree/main/snippet-sample.

TextMate 스니펫 사용

yo code 확장 생성기를 사용하여 VS Code 설치에 TextMate 스니펫(.tmSnippets)을 추가할 수도 있습니다. 생성기에는 여러 .tmSnippets 파일이 포함된 폴더를 가리킬 수 있는 새 코드 스니펫 옵션이 있으며, 이 파일들은 VS Code 스니펫 확장으로 패키징됩니다. 생성기는 Sublime 스니펫(.sublime-snippets)도 지원합니다.

최종 생성된 출력에는 두 개의 파일이 있습니다: 스니펫을 VS Code와 통합하기 위한 메타데이터를 포함하는 확장 매니페스트 package.json과 VS Code 스니펫 형식으로 변환된 스니펫을 포함하는 snippets.json 파일입니다.

.
├── snippets                    // VS Code integration
│   └── snippets.json           // The JSON file w/ the snippets
└── package.json                // extension's manifest

생성된 스니펫 폴더를 .vscode/extensions 폴더 아래의 새 폴더로 복사하고 VS Code를 다시 시작합니다.

12/10/2025