VSC 配置 Vue 模板

VSC 配置 Vue 模板


看图跟着操作来
请添加图片描述

然后搜索/找到 vue.json

请添加图片描述

该 .json 文件就是模板文件

请添加图片描述

不多说,直接上配置:

{
    "vue3-ts-template": {
		"prefix": "vue3-ts",
		"body": [
			"<template>",
				"  <div></div>",
			"</template>",
			"",
			"<script setup lang='ts'> ",
			"",
			"</script>",
			"",
			"<style scoped lang='scss'>",
			"",
			"</style>"
		]
	},
	"vue3-defalut-template": {
		"prefix": "vue3",
		"body": [
			"<template>",
				"  <div></div>",
			"</template>",
			"",
			"<script setup> ",
			"",
			"</script>",
			"",
			"<style scoped lang='scss'>",
			"",
			"</style>"
		]
	},
	"vue2-defalut-template": {
		"prefix": "vue2",
		"body": [
			"<template>",
				"  <div></div>",
			"</template>",
			"",
			"<script> ",
			"export default {",
				"  data() {",
					"    return {};",
				"  },",
				"",
				"  methods: {},",
				"",
				"  computed: {},",
			"};",
			"</script>",
			"",
			"<style scoped lang='scss'>",
			"",
			"</style>"
		]
	}
}

这是我使用的配置,里面的内容自行研究

使用方法:在 .vue 文件中敲出 vue 然后选择,我配置了三个,那么根据也无需求选择内容,然后按下 Tab 即可

请添加图片描述


版权声明:本文为qq_51808659原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。