[React] Visual Studio Code(VSC) snippet 만들기

안녕하세요, 오늘은 Visual Studio Code(VSC)에서 자주 사용하는 코드를 자동 생성하는 기능을 알아보겠습니다.

 

snippet이란 작은 조각이란 뜻인데 코딩할 때, 단축어처럼 특정키를 입력하면 자동완성해주는 기능을 말합니다.

 

예를 들어, vsc에서 html이라고 작성하면 아래와 같이 여러 가지 옵션들을 추천해 줍니다. 

 

그중, 2번째 html:5를 선택하면 아래의 사진처럼 html의 기본적인 구조가 자동작성됩니다. 

위와 같은 기능을 custom 하게 만드는 법을 알아보겠습니다.

 

맥 기준으로 아래 그림과 같이 Code - 기본 설정 - User Snippets을 클릭하면 선택하는 창이 뜨게 됩니다.

 

새로운 것을 생성하려면 New Global Snippets file... 을 클릭해줍니다.

snippet의 이름을 작성하여 enter 해주시면 아래와 같이 주석 처리된 sample 코드가 있습니다.

저는 현재 React를 사용할 예정이라, { } 안의 내용물을 다음과 같이 수정하였습니다.

{
	"Create Functional React Component": {
		"prefix": "fc",
		"body": [
			"import React from 'react';",
			"",
			"function ${1:${TM_FILENAME_BASE}}() {",
			"  return (",
			"    <div>",
			"      ${2:}",
			"    </div>",
			"  );",
			"}",
			"",
			"export default ${1:${TM_FILENAME_BASE}};"
		],
		"description": "Create Functional React Component"
	}
}

보면 json 형식으로 되어있는데 

 

첫번째는 이 snippet의 설명이나 이름을 적어주면 됩니다.

prefix에는 단축어를 지정해줍니다. 위에서는 functional component의 약자인 fc로 해주었습니다.

body에는 자동 완성할 코드를 적어줍니다. 각각의 line은 배열로 되어있기 때문에 ""와 , 로 구분되어야 합니다.

 

소스 내를 잘 보시면 ${ } 형식으로 되어있는 부분이 있는데, 이는 문자 그대로가 아닌, snippet 소스가 됩니다.

${TM_FILENAME_BASE}는 파일명을 가져오고 ${1:} ${2:}는 소스 생성 시, 자동으로 커서가 위치할 순서가 됩니다.

 

위 snippet을 저장하고 새로운 js 파일을 생성한 후에, fc라고 입력하면 다음과 같이 뜨게 됩니다.

 

fc를 선택하면, 아래와 같이 자동으로 작성이 되고, 함수명은 파일명으로, 커서는 App을 위치하는 것을 확인할 수 있습니다.