vscode 中可以通过自定义的关键字快速生成相应的代码片段，以 vue 为例

1. 点击左下方的设置，找到用户代码片段

2. 选择想要生成的代码片段，可以自定义任何模板

3. 配置代码片段

{
  "jx template": {			// 该片段的名称（用于分辨各片段）
	"prefix": "vue",	// 关键字（输入该关键字使用 tab 键即可快速生成）
	"body": [
		"<template>",
		"  <div>",
		"    $2",
		"  </div>",
		"</template>",
		"<script>",
		"export default {",
		"  name: '$1',",
		"}",
		"</script>",
		"<style scoped>",
		"",
		"</style>",
		""
	],
	"description": "vue template"
  }
 }

其中 $1, $2 为生成片段之后光标所在的位置，$0 是光标最后所在的位置。使用 tab 键切换光标，用于快速输入。