[VsCode] User Snippet을 통해 자주 쓰는 코드 등록하기

반복작업은 귀찮아

백준 알고리즘 문제를 풀면서 input 받는 코드를 매번 복사 붙여넣기 하는 것이 귀찮아졌습니다. 몇 줄 안되는 코드지만 매번 반복적인 작업을 하는 것을 조금 더 편리하게 만들고 싶어 방법을 찾다가

스니펫을 설정해보자

VsCode에는 User Snippet기능이 있더라구요. 설정법은 아래와 같습니다.

1. cmd+shift+p를 통해 Configure User snippets 메뉴를 엽니다.
   

2. 사용할 스니펫 파일의 이름을 만들어줍니다. 파일은 전역에서 사용할 수도 있고, 특정 프로젝트 내에서만 사용할 수도 있으니 취사선택해줍시다.
   

3. 생성된 파일의 body 부분에 원하는 코드를 한 줄씩 추가해줍니다. ${숫자}는, 탭이 멈추는 위치이니, 편한 대로 설정해줍니다. 저는 split을 빈 공백으로 할 지, 개행문자로 할 지를 매 번 다르게 사용해야 했기에, split부분에 탭 정지 문자를 넣어주었습니다. prefix 는 스니펫을 불러올 수 있는 키워드로 작동합니다.

{
	// Place your coding_study_repo workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. 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:
	"input": {
		"scope": "javascript,typescript",
		"prefix": "input-boj",
		"body": [
			"require('fs')",
			".readFileSync(process.platform === 'linux' ? 'dev/stdin' : 'test/test.txt')",
			".toString()"
			".trim()",
			".split('$1')",
		],
		"description": "get input from boj / local"
	}
}

4. 스니펫을 사용해봅시다. 등록한 prefix인 input-boj 를 입력하니 자동으로 스니펫이 입력되는 모습을 확인 할 수 있습니다.

맺음말

이 기능을 잘 활용하면 개발에서도 많은 수작업들을 단순화시킬 수 있겠다는 생각이 들었습니다.

redux-toolkit의 slice 작성 템플릿을 스니펫으로 저장하여 사용할 수도 있을 것이고, react component 코드를 템플릿으로 만들어 사용해도 좋을 것 같습니다.