VSCode 스니펫 설정하기

console.log를 매일 쓰고 있는데 이걸 계속 치다간 손목이 곧 망가질 것 같다라는 생각이 들었다.

cl만 검색해서 console.log를 완성하고 싶다..!

이전에 sass에 스니펫을 설정했었던 것 같은데 기억을 되돌려보자🤔

Cmd + SHIFT + P → [Configure User Snippets] 클릭

자신이 사용하는 언어를 클릭하자. 자바스크립트를 사용하니까 javascript.json 클릭!

우리의 VSCode는 생각보다 친절하다

예시를 보고 만들고 싶은 스니펫을 만들어보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// 	"prefix": "log",
// 	"body": [
// 		"console.log('$1');",
// 		"$2"
// 	],
// 	"description": "Log output to console"
// }
  • prefix는 호출할 예약어이고
  • body에 설정하는 내용은 예약어 호출 시 출력할 코드
  • 출력 코드 내부의 $1, $2로 설정된 부분은 포커스가 이동될 순서
  • $1로 설정된 부분이 예약어 호출 시 처음으로 포커싱 될 위치이고 tab 키를 누르게 되면 $2로 포커싱이 이동한다.
1
2
3
4
5
"console.log print": {
    "prefix": "cl",
    "body": ["console.log($1) "],
    "description": "Log output to console"
  }

해당 내용을 추가하고 저장하면 끝!

이제 cl 하나로 console.log를 완성할 수 있게 되었다.😃