Vscode Vue.js snippet 만들기

정말 오랜만에 vue.js 프로젝트를 시작하려는데, init snippet이 맘에 들지 않아 나만의 snippet을 만들고 싶어서 그 과정을 기록합니다

Snippet이란?

Snippet 개발 배경: vue-snippet3

vscode 확장 중에서 vue 3 snippets 확장을 기존에 쓰고 있었습니다
이 확장은 여러 snippet을 제공해주는데 그 중에서도 vueInit을 입력하면 다음과 같은 내용을 작성해줍니다

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

이 snippet으로 컴포넌트를 시작하면 template lang, style lang 부분에 대한 수정이 필요합니다

저는 typescript를 사용할 것이고, scss를 사용하지 않을 것이고, 각 tag 사이에 개행이 있기를 원합니다

Snippet 만들기

shift + command + p 를 눌러 vscode 명령어 창을 띄우고
snippet을 검색하고 configure user snippets를 선택합니다

snippet을 어디서 사용할지 정합니다
vue에서만 사용할것이기 때문에 vue를 검색해서 선택합니다

vue.json 파일에서 아래와 같이 입력해주고 저장합니다
주석의 내용이 어떤 내용인지는 아래 캡처와 함께 설명하겠습니다

{
  // 우측에 뜨는 이름
  "vue-init-ts-123": {
    // 검색하는 이름
    "prefix": "vue-init-ts-456",
    // snippet 내용
    "body": [
      "<template>\n<div></div>\n</template>\n\n<script lang='ts'>\n</script>\n\n<style>\n</style>\n"
    ],
    "description": "vue.js init snippet using typescript"
  }
}

.vue 파일에 가서 vue까지 입력하면 snippet이 나오게 됩니다

vue-init-ts는 검색이 되는 이름, 우측에 나오는 이름, 설명, 내용 4가지 내용이 있습니다
456이 붙은 검색 이름으로 검색을 하고, 오른쪽에 123이 붙은 이름이 나옵니다

제가 원하는 초기 vue snippet이 완성되었습니다

vue.js의 순서

Vue.js 공식문서 - Style Guide에 따르면 style tag만 반드시 마지막에 와야하고, 다른 순서는 중요하지 않다고 하네요