VS Code 스니펫으로 코드 조각 재활용하기

VS Code 스니펫을 쓰면 반복적인 코드를 매번 칠 필요 없다. for만 쳐도 반복문이 튀어나오게 만들 수 있다.

기본 사용법

VS Code에서 스니펫은 JSON 형태로 관리한다. .vscode/ 폴더 안에 넣거나, 전역 스니펫을 사용할 수 있다.

1. 전역 스니펫 열기: Ctrl+Shift+P (Windows/Linux) 또는 Cmd+Shift+P (Mac)를 눌러 Command Palette를 열고, "snippet"을 입력해서 "Configure User Snippets"를 선택한다.
2. 언어 선택: 스니펫을 적용할 언어를 선택한다. (예: python) 새 JSON 파일이 열린다.
3. 스니펫 정의: 다음 예시처럼 스니펫을 정의한다.

{
  "Print to console": {
    "prefix": "log",
    "body": [
      "console.log('$1');",
      "$2"
    ],
    "description": "Log output to console"
  },
  "For loop": {
    "prefix": "for",
    "body": [
      "for (let i = 0; i < $1; i++) {",
      "  $2",
      "}"
    ],
    "description": "Simple for loop"
  }
}

• prefix: 스니펫을 활성화하는 단축어. log나 for처럼 짧게 짓는다.
• body: 실제 코드 조각. 배열 형태로 여러 줄 입력 가능. $1`, `$2는 Tab 키로 이동하는 커서 위치를 나타낸다.
• description: 스니펫 설명. 필수 아님.

1. 사용: 이제 VS Code 에디터에서 log 또는 for를 입력하고 Tab 키를 누르면 해당 스니펫이 자동 완성된다. $1`, `$2 위치로 커서가 이동한다.

안 될 때

스니펫이 작동하지 않으면 다음을 확인한다.

• 오타: JSON 파일에 오타가 있는지 확인한다. 괄호 짝이 안 맞거나, 쉼표가 빠졌을 수도 있다. JSONLint 같은 도구로 검사하면 편하다.
• 언어 설정: 스니펫이 올바른 언어에 연결되어 있는지 확인한다. Python 파일인데 JavaScript 스니펫을 쓰려고 하면 안 된다.
• 충돌: 이미 같은 단축어를 사용하는 다른 스니펫이나 확장이 있을 수 있다. 다른 스니펫 비활성화하거나 단축어를 변경해본다. prefix 값을 바꿔본다.
• 범위: 프로젝트 스니펫이 사용자 스니펫을 덮어쓸 수 있다. .vscode/settings.json 파일에서 스니펫 범위를 설정할 수 있다.
• VS Code 재시작: VS Code를 재시작하면 스니펫이 다시 로드된다. ```