vscode vue 스니펫 추가하기!

개요

Vue와 TypeScript를 사용하는 웹사이트를 만들고 있는 중인데 vue-init 스니펫의 출력결과는 다음과 같다.

<template lang="">
    <div>
        
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="">

그런데 내가 원하는 결과는 타입스크립트를 사용하기 때문에

<template>
	
</template>

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'

</script>

<style scoped>


</style>

 

이렇다.

 

사소한 차이지만, vue 파일을 만들 때 마다 수정을 하는건 너무나 귀찮다.

그래서 직접 스니펫을 수정한다.

 

방법

먼저 Ctrl+Shift+P를 눌러서 커맨드 팔렛트를 누르고 snippet을 검색해서 선택한 후 vue를 선택해 준다. 그럼 vue.json파일이 생성된다. 이걸 작성해주면 새로운 스니펫을 만들 수 있따.

{
	// 우측에 뜨는 이름
	"vue-init-TypeScript": {
		// 검색하는 이름
		"prefix": "vue-init-ts",
		// snippet 내용
		"body": [
		  "<template>\n<div></div>\n</template>\n\n<script lang='ts'>\n</script>\n\n<style>\n</style>\n"
		],
		"description": "타입스크립트를 사용하는 vue프로젝트의 템플릿"
	  }
}

이렇게 작성을 하면

.vue 파일에서

이렇게 스니펫이 추가된 것을 확인 할 수 있다.