[ VSCode ] snippets 커스텀해서 사용하기

vscode에서 많은 snippets Extention을 이미 제공합니다.

 

하지만, 최근에 타입스크립트를 많이 사용하고 있어서 만들고 싶은 형태의 타입스크립트를 사용하는데 많은 한계가 있어서 간단하게 Snippets을 만들어 사용 방법을 남깁니다. 

 

1. vscode를 띄우고 캡쳐 화면의 경로로 들어갑니다. 

 

 

2. 다음으로 New Global Snippets file을 클릭합니다. 

 

 

3..클릭을 하시면 이름을 정해야하는데 이름은 편하신대로 정하시면 됩니다. 

 

4. 파일이 만들어지면 양식에 맞춰서 형태를 만들어주면 됩니다. 제가 간단하게 만든것을 보고 참조해서 만들면 됩니다. 

 

{
	
	"Typescript for Props": { // snippets이름 
		"prefix": ["dh1"], // 약어입니다. 편하게 본인이 쓰고싶은 단어로 만드세요
		"body": [ // 결과값
			"import React from 'react';",
			"",
			"interface Props {}",
			"",
			"const App: React.FC<Props> = ({}: Props) => <div></div>;",
			"",
			"export default App;",
		],
		"description": "ypescript for Props" // 설명 
	},
}

 

5. 파일을 저장후에 테스트 파일을 만들어서 약어를 쳐보세요. 

 

 

 

 

이렇게 나오시면 완성입니다 ^^ 다른기능도 충분히 많으니 참고하셔서 사용하세요.