[Vue] VSCode에서 Vue.js 템플릿 설정 (Vue.js Snippet)

자주 사용하는 snippet을 설정하기 위해 검색해서 찾아보았다.

 

1. 사용할 템플릿 만들기

script를 위로 올려서 사용할 것이기 때문에 script를 위로 올렸다.

<script setup>

</script>

<template>
  
</template>

<style scoped>

</style>

 

 

2. vue.json 수정

Ctrl + Shift + P 로 명령창을 열어서 Code Snippet 검색

 

Configure Snippets 선택 후 vue 검색 후 엔터

여기에 vue를 검색하면 된다.

 

위에서 만든 템플릿을 문자열로 변환해야 한다.

개행은 \n, 탭은 \t를 넣어준다.

<script setup>\n\n</script>\n\n<template>\n\t\n</template>\n\n<style scoped>\n\n</style>

{
    "vue-init": {
        "prefix": "vue-init",
        "body": [
            "<script setup>\n\n</script>\n\n<template>\n\t\n</template>\n\n<style scoped>\n\n</style>"
        ],
        "description": "vue.js init snippet"
    }
}

 

 

 

3. Snippets 사용

vue 파일에서 vue 를 입력하면 자동완성으로 내가 설정한 vue-init이 뜬다.

엔터나 탭을 눌러서 선택하면 내가 설정한 템플릿이 나온다

오타 나서 scope로 됐는데 원래는 scoped로 적어줘야 함 !!!!!!