Vue Composition API script setup のお約束をスニペットにする【VS Code】

はじめに

ナイトウ(@engineer_naito)と申します。

<script setup lang="ts">
//
</script>

<template>
  <!--  -->
</template>

<style scoped>
/*  */
</style>

を新しい .vue ファイルを作成するたびに書きます。
VS Code のスニペットとして登録してしまおうと思います。

手順

1. .vscode/ に vue.code-snippets を作成
2. スニペットを登録

vue.code-snippets

{
  "Vue3 Component": {
    "prefix": "vue",
    "scope": "vue",
    "body": [
      "<script setup lang=\"ts\">",
      "",
      "</script>",
      "",
      "<template>",
      "",
      "</template>",
      "",
      "<style scoped>",
      "",
      "</style>"
    ],
    "description": "Vue3 Composition API script setup TypeScript"
  }
}

最後に

最後まで読んでいただきありがとうございました！

参考

https://code.visualstudio.com/docs/editor/userdefinedsnippets