VSCode IDE 에서 스니펫으로 개발 생산성 올리기

4 minute read

2024-07-04

개발에서 빠질 수 없는 툴로 IDE 가 있다. 나는 VSCode 를 주로 사용한다. IDE 를 잘 사용한다면 개발을 할 때 소모되는 피로도를 줄일 수 있어서 스니펫을 애용하고 있다.

이번 글에서는 VSCode 에서 스니펫을 세팅하는 방법을 정리해보려고 한다.

세팅법

세팅하는 과정은 매우 간단하다. 자세한 사항은 VSCode 공식문서를 확인할 수 있다. (링크)

1. 명령 팔레트 켜기

우선 CMD + Shift + P 단축키를 누르거나 보기 - 명령 팔레트 를 클릭해서 IDE 상단에 명령 팔레트를 표시하게 한다.

2. User Snippet 검색하기

전 과정을 진행했다면 아래와 같은 상단 팝업 같은 걸 볼 수 있다.

여기에 User Snippet 을 검색해준다. 그러면 사용자 코드 조각 구성이라는 항목을 볼 수 있다. 엔터를 쳐준다.

그 다음 단계는 언어를 지정해줘야한다. VSCode 스니펫은 확장자별 스니펫을 지정해줄 수 있다. 필요에 따라 언어에 상관없이 전역적으로 설정해주는 것도 가능하다.

나는 여기서 typescript 로 예제를 진행하려고 한다.

언어를 선택하면 아래와 같은 json 형식의 데이터가 담겨져 있을 거다.

{
	// Place your snippets for typescript 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"
	// }
}

이제 주석에 담긴 예제처럼 나만의 스니펫을 넣어보자.

4. 스니펫 추가하기

테스트 코드에 필요한 코드들을 넣어보는 것으로 예제를 진행해보려고 한다.

template

describe('', () => {
  test('', () => {
    // test code...
    
  });
});

보통 하나의 맥락을 공유하는 테스트들을 describe 로 영역을 지정하고 각 테스트를 test 로 선언해준다. 위와 같은 코드를 dts 를 입력했을 때 자동 입력되는 스니펫을 입력하려고 한다.

나는 아래와 같이 추가해주었다.

snippet code

{
	"TypeScript Test Snippet": {
		"prefix": "dts",
		"body": [
			"describe('', () => {",
			"  test('', () => {",
			"    //",
			"    $1",
			"  });",
			"});"
		],
		"description": "Create a test block for TypeScript"
	}
}

위 내용을 하나씩 살펴보면

prefix : 단축 키워드. IDE 에서 내가 어떤 문자열을 입력했을 때, 후보에 나오게 할 지 정하는 키워드를 지정하는 항목이다.
body : 스니펫 본문. 내가 지정한 키워드를 선택했을 때, 자동 완성되는 텍스트다.
description : 스니펫 설명. 추가한 스니펫이 어떤 지 설명하는 란이다.

위에서 말했듯이 dts 를 입력했을 때 스니펫이 추가되고 싶어했기 때문에 prefix 에 해당 키워드를 추가해주었다.

그리고 원하는 포멧을 body 에 넣다. 하지만 조금 다른 게 있다. 바로 $1 이다. 이는 커서를 자동 이동시켜주어서 바로 코드를 입력할 수 있게 해준다. 매우 간편하다.

하나만 가능한게 아니라 멀티 포커싱이 가능해서 아래와 같이 작성할 수 있다.

{
  "body": [
    "describe('', () => {",
    "  test('', () => {",
    "    //",
    "    $1",
    "  });",
    "  test('', () => {",
    "    //",
    "    $1",
    "  });",
    "});"
  ],
}

동일한 코드를 입력하고 싶을 땐 멀티 포커싱을 사용하면 매우 편리해진다.

마무리

지금까지 스니펫을 설정하는 과정을 정리해보았다. 이외에도 나는 React, Storybook 등 다양한 코드에서 활용하고 있다.

그리고 스니펫을 통해 개발 타이핑에서 오는 피로도를 줄일 수 있어 매우 만족하고 있다.

#productivity