VS Code 스니펫 만들기 : snippet generator 사용 방법 및 VSC 적용하기

snippet 이란?

코드 조각으로, 재사용한 소스 코드를 말한다.

 

개발을 시작하기 전 설정해두면 반복되는 코드를 일일히 입력하지 않아도 되어서 굉장히 유용하다.

 

---

Snippet generator 사용 방법

https://snippet-generator.app/?description=&tabtrigger=&snippet=&mode=vscode

snippet generator

 

스니펫 generator 사이트를 이용하면 간편하게 스니펫을 만들 수 있다.

 

 

Description : 스니펫 설명

Tab trigger : 단축키 작성

Your snippet : 나만의 스니펫 작성

예를 들어

위 html 코드를 스니펫으로 설정한다고 한다면 아래와 같이 입력하면 된다.

이제 VSC에 설정하면 html 에서 ko 키워드 입력할 때 스니펫 코드가 자동 완성되어 입력되도록 할 수 있다.

---

VS Code 스니펫 설정 방법

 

1. 위에서 완성된 스니펫을 Copy snippet을 클릭하여 복사한다.

 

복사하면 Copied로 문구가 바뀐다.

 

2. VS Code를 열어 왼쪽 하단의 설정(톱니바퀴 모양) 클릭 후 코드 조각을 선택한다.

 

3.  이때 열리는 작업영역에서 스니펫을 적용할 언어를 검색한다.

나는 예시로 html 스니펫을 만드니까 'html'을 입력했다.

html.json 을 클릭한다.

(여기서 선택한 언어에만 내가 원하는 스니펫이 적용된다)

EX) html에서 적용했는데 javascript에서 똑같이 적용 X 따로 javascript.json 에도 적용해줘야함.

 

(검색안해도 아래 이런식으로 다양하게 언어들이 뜬다. 원하는거 선택!)

 

4. 복사한 스니펫을 대괄호 {} 안에 붙여넣기 한다.

이렇게 하면 아래 사진과 같이 html 에서  ko를 입력했을 때 바로 입력이 가능하도록 뜬다.

---

 

snippet으로 자동 완성 후 원하는 부분에서 바로 입력 하는 방법

 

바로 $를 이용하여 순서를 매기는 것이다.

위와 같이 title태그 안에 $1을 넣고 body 태그 안에 $2를 넣으면, 

스니펫 자동 완성 후 title 태그와 body 태그에 커서 모양이 생긴 것을 볼 수 있다.

이때 바로 입력하면 title 태그에 작성이 되고, Tap 키를 눌러서 body 태그에 바로 작성 할 수 있다.