VSCode - User Snippets 사용하기 (반복 구문 단축키 설정)

VSCode 로 프로그래밍을 하다 보면 자주 사용하는 패턴이 있습니다. 매번 반복하다 보면 손가락에 피로도가 쌓일 수 있는데 이걸 좀 덜어줄 수 있는 팁이 있습니다. 즉, 자주 사용하는 구문을 단축키로 등록해서 사용하는 방법입니다.

명령어 팔렛트(Ctrl+Shift+P)에 들어가셔서 "snippets"를 입력하신 후" Configure User Snippets"를 선택하세요.

다음 화면이 뜨면 자바스크립트 JSON 파일을 선택해 주세요.

그럼, 주석문을 참고하셔서 단축키로 지정하고 싶은 구문을 작성해 주시면 됩니다.

{
  // 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"
  // }
  "Express callback": {
    "prefix": "rr",
    "body": ["(req, res, next) => {$1}"],
    "description": "Express callback"
  }
}

위에서는 <RR>이라는 단축키를 지정했기 때문에 에디터상의 필요한 위치에서 단축키를 누른 다음 <TAB>키를 누르시면 위에서 작성한 구문의 템플릿이 현재 커서에 추가됩니다.