VSCode上でNuxt,TypeScript,CompositionAPIで開発するときに毎回同じ内容を書くのが面倒だなと思ったのでスニペットを作ってみました。
VSCodeで新規ファイルを作成後、ファイル内でnuxt3+ts template
を打つとこのスニペッツが出てくるので、それを選択すれば以下のコードが自動的に生成されます。(おそらくnuxt
を打っただけで補完が効くと思います)。
内容としては、<template>
、<script lang="ts">
、<style scoped>
タグやdefineComponent
のimportと定型文を設定しています。
誰かの参考になれば幸いです:)
vue.json
{
"nuxt3+ts template": {
"prefix": "nuxt3+ts template",
"body": [
"<template>",
"",
"</template>",
"",
"<script lang=\"ts\">",
"import { defineComponent } from '@nuxtjs/composition-api'",
"export default defineComponent({",
" name: '$1',",
" setup(){}",
"})",
"</script>",
"",
"<style scoped></style>"
]
}
}