Vue3 Snippet 만들기

생산성을 높이기 위해 vue snippet을 만들어봅시다.

먼저, 아래처럼 vscode에서 command + shift + P 를 눌러 snippet을 검색해서 사용자 코드 조각 구성을 선택해 줍니다.

 

 

vue snippet을 생성할 것이니 vue를 검색해 선택해줍니다.

 

 

그럼 vue.json 파일이 생성되고 여기에서 원하는 대로 설정해주면 됩니다. 
저는 typescript와 scss를 사용할 예정이어서 아래처럼 설정해주었습니다.

{
    "vue-init-ts": {
        "scope": "vue",
        "prefix": "vts",
        "body": [
            "<template>",
            "\t<div>",
            "\t</div>",
            "</template>",
            "<script lang=\"ts\">",
            "import { defineComponent } from 'vue'",
            "",
            "export default defineComponent({",
            "\tname: '${TM_FILENAME_BASE}',",
            "\tcomponents: {},",
            "\tprops: {},",
            "",
            "\tsetup () {",
            "\t\treturn {}",
            "\t}",
            "})",
            "</script>",
            ""
            "<style lang=scss scoped>"
            "</style>"
        ],
        "description": "Vue3 Composition API"
    },
    "vue-init-setup-ts": {
        "scope": "vue",
        "prefix": "vsc",
        "body": [
            "<template>",
            "\t<div>",
            "\t</div>",
            "</template>",
            "<script setup lang=\"ts\">",
            "\timport { defineProps, ref } from 'vue'",
            "",
            "\tconst props = defineProps<{}>()"
            "</script>",
            ""
            "<style lang=scss scoped>"
            "</style>"
        ],
        "description": "Vue3 Setup Composition API"
	}
}

 

이제 해당 snippet을 만들고 싶을 때, vts를 입력하면 아래처럼 나오게 됩니다.