为了开发更高效，我们可以在vscode上配置常用的代码片段snippets。

运行环境

vscode：1.52.1

配置user snippets

打开步骤：Code > Preferences > User Snippets

输入自定义代码库或预置代码库

配置代码片段

以vue3-template为例

"vue3-template": {
     // scope字段表示代码块适用的语言
	"scope": "vue",
    // prefix表示用来触发代码块的内容
	"prefix": "vue3Template",
    // body表示代码块的内容
	"body": [
		"<template>\n\t<div>\n\n\t</div>\n</template>",
		"<script lang=\"ts\">\nimport {defineComponent} from 'vue';\n\n",
		"export default defineComponent({\n\tname: 'componentName'$0\n});\n</script>\n\n",
		"<style lang=\"less\" scoped>\n\n</style>\n"
	],
    // description表示代码块的描述
	"description": "vue3 Typescript less 模板文件结构"
}

如何使用

创建vue文件，在vue文件中输入刚才定义的代码片段名称，即可快速创建代码片段。