[ Vue.js ] VS code - Snippet 활용하는 방법

 

Vue.js의 template 세트를 원하는 부분에 미리 작성해놓고 사용하는 방법이 있습니다.

물론 기본적으로 ctrl  + space 만 눌러도 template, script, style 이 세가지가 다 나오지만, 

잠깐 귀찮으면서 미리 작성해놓으면 원하는 내용을 추가적으로 등록해놓을 수 있습니다.

결과물

이런식으로 말이죠.

 

F1을 눌러 snippet을 검색하고, preferences를 누릅니다.

 

그 다음 vue 를 검색하여 vue.json을 클릭합니다.

 

vue.json 파일이 열리며, 이곳에 작성해주시면 됩니다.

 

{ 
// ...
"Generate Basic Vue Code" : {
		"prefix": "vue-start",
		"body": [
			"<template>\n\t<main>\n\n\t</main>\n</template>\n<script>\nexport default {\n\tname: '',\n\tcomponents: {},\n\tdata() {\n\t\treturn {\n\t\t\texample: '',\n\t}\n},\n\tbeforeCreate() {},\n\tcreated() {},\n\tbeforeMount() {},\n\tmounted() {},\n\tbeforeUpdate() {},\n\tupdated() {},\n\tbeforeUnmount() {},\n\tunmounted() {},\n\tmethods: {}\n}\n</script>"
		],
		"description": "Generate Basic Vue Code"
	}
}

prefix 부분에 명령어와 같이 vue-start를 입력하면 해당 body 포멧을 불러올 수 있게 됩니다.

body 부분에 원하는 내용을 작성하는 것입니다.

 

추가.

created & mounted 메서드만

{
"Generate Other Vue Code" : {
		"prefix": "vue-other",
		"body": [
			"<template>\n\t<main>\n\n\t</main>\n</template>\n<script>\nexport default {\n\tname: '',\n\tcomponents: {},\n\tdata() {\n\t\treturn {\n\t\t\texample: '',\n\t}\n},\n\tcreated() {},\n\tmounted() {},\n\tmethods: {}\n}\n</script>"
		],
		"description": "Generate Basic Vue Code"
	}
}

 

 

이상입니다.