[vscode]snippets 작성

이번 포스트에서는 vscode에서 snippets 작성에 대해 살펴보자.

 

vscode snippets 사용

 

snippet 작성

file --> preferences --> user snippets 를 선택하면 어떤 파일 타입에 snippets을 작성할 것인지 물어본다.

예를 들어 html에서 사용할 snippet이라면 html.json을 선택한다.(없다면 만든다)

 

또는 사용중인 file에서 F1 입력 후 command palette에서 Snippets 선택 후 위의 화면에 진입할 수도 있다.

 

이후 아래와 같은 형태로 snippet을 등록한다.

"router": {
	"prefix": "router 등록",
	"body": [
		"<script src='https: //unpkg.com/vue-router/dist/vue-router.js'></script>"
	],
	"description": "router"
},

 

 

 

snippets 사용

아래와 같이 사용할 수 있다.

 

 

다양한 변수 활용

예를 들면 console에 로그를 남기는 경우 파일 이름을 자동으로 삽입하려는 경우나 현재 시각을 출력하고 싶은 경우가 있는데 이럴 때에는 vscode에서 제공하는 변수를 이용할 수 있다.

https://code.visualstudio.com/docs/editor/userdefinedsnippets#_choice

Snippets in Visual Studio Code

다음은 로그를 남기면서 파일 이름을 삽입하는 snippets의 예이다.

"console.log with file name": {
  "prefix": "qjs_console",
  "body": [
    "console.log(`$TM_FILENAME - ${1:내용}`, ${2:메시지})"
  ],
  "description": "console.log with file name"
},

${1}, ${2}는 placeholder로 추가적인 값을 입력할 위치로 tab 키를 이용하면 이동가능하다. :내용 등은 해당 위치에 어떤 값을 넣을지 나타내는 hint 역할이다. 한번 써보면 쉽게 의미를 파악할 수 있을 것이다.