vscode user snippet

개요

역시나 맥 기준입니다

vscode에는 user snippet 기능이 있습니다

snippet은 대충 미리 코드뭉치를 만들어놓고 계속해서 생성해서 사용하는 개념이에요

react에서 매번 컴포넌트를 찍어낼때마다 공통적으로 반복해서 작성해야하는 코드들이 있죠.

예를 들어서

TopBottom.tsx 파일을 생성했다고 합시다.

그러면 파일 내부에 가장 먼저 작성하게되는 내용이

const TopBottom = () => {
  return <div>TopBottom</div>;
};

export default TopBottom;

이런 모습이죠.

파일이름을 가지고 기본 컴포넌트의 내용을 만들어주는 user snippet 기능을 생성해봅시다.

활용방법

1. command + shift + P
2. snippet 타이핑
3. Preferences: Configure User Snippets

글로벌로 생성할지, 특정 프로젝트에만 생성할지 결정합시다. 저는 몇개 안써서 글로벌로 합니다.

특정 프로젝트에 생성하게되면, 프로젝트 내부에 .vscode 디렉토리에 스니펫이 저장됩니다.

이걸로 팀원들과 vscode snippet을 공유할수도 있겠죠.

아래처럼 내용을 수정합니다.

{
	// Place your global 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:
	"rcc": {
		// "scope": "javascript,typescript",
		"prefix": "rcc",
		"body": [
			"const $TM_FILENAME_BASE = () => {",
			"  return (",
			"    <div>$TM_FILENAME_BASE</div>",
			"  );",
			"}",
			"",
			"export default $TM_FILENAME_BASE;"
		],
		"description": "Create React Component"
	}
}

$TM_FILENAME_BASE는 파일 이름을 뜻합니다. 작성하기가 좀 귀찮은 구조로 되어있지만.. 쉽죠?

이제 vscode에서 rcc를 타이핑하면, 자동완성기능이 스니펫을 사용할지 물어봐줍니다!