🪄Snippets(스니펫)!

<aside> 💡 Snippets란?

• 반복되는 코드 패턴을 입력하기 쉽게 해주는 템플릿
• snippet = 조각 → code snippet = 코드 조각
• VS Code에 내장되어 있음: IntelliSense (Ctrl+Space)에 다른 제안들과 함께 나타남 </aside>

🛠️Built-in snippets

• VS Code에는 JavaScript, TypeScript, Markdown 및 PHP와 같은 여러 언어에 대한 snippet이 내장되어 있기 때문에 우리는 이미 자연스럽게 사용하고 있었음

  

🛠️Create custom snippets

1. Command Palette(Ctrl+Shift+P) 열기

2. Snippets: Configure User Snippets 검색 & 선택

3. 특정한 언어에서 사용하고 싶은 경우 언어를 찾아서 선택, 모든 언어에 대해 사용하고 싶은 경우 New Global Snippets file(또는 이미 존재하는 global file) 선택

   

4. Snippet file은 JSON으로 작성됨 (C-style 주석, 대부분의 TextMate 문법, 삽입 context에 맞는 공백 포맷팅 지원)

   • 형식

     "snippet name": {
     	"prefix": ["trigger-word1", "trigger-word2"],
     	"body": ["content"],
     	"description": "optional description"
     }
     

     • snippet name
       • snippet 이름
       • description이 제공되지 않을 때 IntelliSense를 통해 표시됨
     • prefix
       • IntelliSense에서 snippet을 표시하는 하나 이상의 trigger word
       • Substring matching이 prefix들에 수행되기 때문에 예를 들어 "tw"는 "trigger-word" 매칭됨
     • body
       • content의 하나 이상의 line → 삽입될 때 multiple lines로 결합됨
       • Newlines 또는 embedded tabs는 snippet이 삽입되는 context에 따라 format됨
     • description (optional)
       • IntelliSense에 표시되는 설명

   • JavaScript의 for loop 예시

     // in file 'Code/User/snippets/javascript.json'
     {
       "For Loop": {
         "prefix": ["for", "for-const"],
         "body": ["for (const ${2:element} of ${1:array}) {", "\\t$0", "}"],
         "description": "A for loop."
       }
     }
     

     • body에서 3개의 placeholder를 사용하고 있음
       • ${1:array}, ${2:element}, $0
       • : 뒤에 오는 문자열은 default text
     • Tab으로 다음 placeholder로 빠르게 jump 가능

   <aside> 💡

   snippet 정의를 만들어주는 유용한 도구

   snippet generator

   </aside>

📝Snippet Syntax

snippet의 body에서는 다양한 기능을 제공

Tabstops

• $i로 editor 커서의 위치 지정 가능
• 여러 곳의 동일한 tapstop은 함께 동기화되어 업데이트됨
• 방문 순서 i
  • 1부터 시작해서 오름차순
  • 0은 항상 마지막에 오는 optional special case → 지정된 위치에서 커서와 함께 snippet mode 종료

Placeholders

• ${1:foo}처럼 값이 있는 tapstop
• ${1:another ${2:placeholder}와 같이 중첩 가능