.vscode 扩展配置

一、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 为所有文件默认格式化器
}