[vue3, vscode] - script setup 내부에 snippet 주석 만들기

최근에 사수가 퇴사하게 되면서 팀 사정상 부서 이동이 되었고... 기존 파트에서 사용하던 vue2 프로젝트를 vue3 로 변경하는 작업을 진행 하고 있는 중입니다.

 

작업은 vue3 버전 템플릿 형태는  tempate - script (setup) - style 형태로 아래와 같이 사용하고 있는데

<template>
    <div>

    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

 

 

컴포지션 api - setup 형태는 인스턴스 구조에 제약을 두고 있지 않다보니... 자동으로 snippet 이 적용이 안되고 있습니다.

 

그래서 개발자 개인적인 취향으로... 보기 좋게 작성 하기 위해서 vscode 내부에 snippet 를 임의로 커스텀 하여 사용 하였고 추가 된 주석은 아래와 같음..

 

 

<template>
    <div>

    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
// ✅ 1. Import 필요한 모듈
// ✅ 2. Props & Emits 정의
// ✅ 3. 반응형 상태 선언
// ✅ 4. Lifecycle Hooks (마운트/언마운트 시 로직 실행)
// ✅ 5. Watcher (props 값 변경 감지)
// ✅ 6. 이벤트 핸들러
</style>

 

코드 snippet 은 아래 설정 사용 하였습니다...

 

"Vue 3 Setup Component": {
      "prefix": "v3s",
      "body": [
        "// ✅ 1. Import 필요한 모듈",

        "// ✅ 2. Props & Emits 정의",

        "// ✅ 3. 반응형 상태 선언",

        "// ✅ 4. Lifecycle Hooks (마운트/언마운트 시 로직 실행)",

        "// ✅ 5. Watcher (props 값 변경 감지)",

        "// ✅ 6. 이벤트 핸들러",

      ],
      "description": "Vue 3 Composition API - setup() 기본 구조 템플릿"
    }

 

---