在左下角点击设置选择代码片段 

选择新增 

vue2

{
	"Print to console": {
		"prefix": "vue2", //这里是定义快速呼起指定代码片段的名称
		"body": [
			"<template>",
			"  <div class='$2'>$5</div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  data() {",
			"    return {",
			"",
			"    };",
			"  },",
			"  computed: {},",
			"  watch: {},",
			"  methods: {",
			"",
			"  },",
			"  created() {",
			"",
			"  },",
			"  mounted() {",
			"",
			"  },",
			"  beforeCreate() {},",
			"  beforeMount() {},",
			"  beforeUpdate() {},",
			"  updated() {},",
			"  beforeDestroy() {},",
			"  destroyed() {},",
			"  activated() {},",
			"  components: {},",
			"}",
			"</script>",
			"",
			"<style lang='scss' scoped>", //less是css的预处理器 要根据你所选择的处理器来进行更改
			"$4",
			"</style>"
		],
		"description": "vue2代码片段"
	}
}

vue3

{
	"Print to console": {
		"prefix": "vue3", //使用v3-setup快速选择该代码片段
		"body": [
			"<template>",
			"<div>",
			"$1", //默认光标
			"</div>",
			"</template>",
			"<script setup lang=\"ts\">",
			"import { onMounted, ref } from 'vue';",
			"onMounted(() => {",
			" ",
			"})",
			"</script> ",
			"<style lang=\"less\" scoped>", //根据项目中使用的语言动态填写lang的值
			" ",
			"</style>"
		],
		"description": "vue3的setup代码块"
	}
}

nuxt3

{
	"Print to console": {
		"prefix": "nuxt3", //使用nuxt3-setup快速选择该代码片段
		"body": [
			"<template>",
			"<div>",
			"$1", //默认光标
			"</div>",
			"</template>",
			"<script setup lang=\"ts\">",
			"onMounted(() => {",
			" ",
			"})",
			"</script> ",
			"<style lang=\"scss\" scoped>", //根据项目中使用的语言动态填写lang的值
			" ",
			"</style>"
		],
		"description": "nuxt3的setup代码块"
	}
}