[Visual Studio Code(VScode)] 주석 탬플릿 자동으로 생성하기 (Snippets 설정하기)

 

VS Code에서 Vue 파일 생성 시 자동으로 주석 포맷을 넣는 탬플릿을 생성을 원할때 사용하는 기능인 VS Code Snippets 가 있습니다.

 

Snippets을 사용하면 코드 조각을 템플릿으로 만들어 새로운 파일을 만들 때마다 자동으로 사용할 수 있습니다.

 

 아래에 가이드를 제공하니 참고하시기 바랍니다.

 

VS Code에서 Snippets 설정하기

1. Snippets 파일 생성
   • VS Code에서 Ctrl + Shift + P (Mac은 Cmd + Shift + P)를 누르고 "Preferences: Configure User Snippets"를 검색합니다.
   • "Vue"를 위한 사용자 Snippet을 만들기 위해 "New Global Snippets file"을 선택하거나, 파일을 직접 선택하여 설정할 수 있습니다.
2. Snippet 추가
   저는 Vue 파일을 선택해서 Snippet 파일을 열어서 수정했습니다.

• prefix: Snippet을 호출할 때 사용하는 키워드입니다. 예를 들어, vue-template로 설정하면 새 Vue 파일을 만들 때 이 키워드를 입력하면 자동으로 템플릿이 완성됩니다.
• body: 파일 생성 시 추가될 내용입니다. 여기에는 Vue 파일의 템플릿, 스크립트, 스타일, 그리고 파일에 대한 설명을 포함할 수 있습니다.
• description: Snippet의 설명을 작성합니다.

---

"vue-template": {
		"prefix": "vuetemplate",
		"body": [
			"<!--------------------------------------------------------------------",
			"",
			"파일 : ${TM_FILENAME}",
			"",
			"작성 : <작성자>",
			"",
			"설명 : <설명을 입력하세요>",
			"",
			"--------------------------------------------------------------------->"
		],
	}

 

 

 

 

---

Sniuppet 저장 후 vue 파일을 생성하면 아래와 같이 키워드 선택할 수 있게 나옵니다.

선택하게 되면 vue 파일명으로 자동으로 나오게 됩니다.