一、vue快捷鍵配置

在項目.vscode下新建vue3.0.code-snippets
每當輸入vue3.0后自動生成代碼片段

{"Vue3.0快速生成模板": {"scope": "vue","prefix": "Vue3.0","body": ["<template>","  <div>${1:test}</div>","</template>","","<script lang=\"ts\">","export default {","  setup() {","    return {};","  },","};","</script>","","<style lang=\"scss\" scoped></style>",""],"description": "Vue3.0"}
}

vue3.2.code-snippets

{"Vue3.2+快速生成模板": {"scope": "vue","prefix": "Vue3.2+","body": ["<script setup lang=\"ts\"></script>","","<template>","  <div>${1:test}</div>","</template>","","<style lang=\"scss\" scoped></style>",""],"description": "Vue3.2+"}
}

vue3.3.code-snippets

{"Vue3.3+defineOptions快速生成模板": {"scope": "vue","prefix": "Vue3.3+","body": ["<script setup lang=\"ts\">","defineOptions({","  name: \"\",","});","</script>","","<template>","  <div>${1:test}</div>","</template>","","<style lang=\"scss\" scoped></style>",""],"description": "Vue3.3+defineOptions快速生成模板"}
}

二、自動調用.prettierrc格式化代碼

settings.json

{"editor.formatOnSave": true, // 保存格式化文件"editor.defaultFormatter": "esbenp.prettier-vscode" // 指定 prettier 為所有文件默認格式化器
}