在vscode中的vue文件中配置vue3初始化快捷代码

tang0109

已于 2022-04-29 15:29:23 修改

阅读量1.7k

点赞数

文章标签： vue.js elementui javascript

于 2022-04-29 13:54:13 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_51608296/article/details/124492699

版权

本文介绍了如何在Visual Studio Code(VSCode)中为Vue3文件设置自定义的初始化快捷代码。通过用户代码片段设置，创建一个.vue文件时，输入特定触发词如'vue3'，可以快速生成预设的Vue3模板代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.点击设置——用户代码片段

2.新建代码片段

会生成一个xxx.code-snippets文件

3.在文件里面输入以下代码

第一种：

{
	"demo":{
		"prefix":"v3",
		"body": [
			"<template>",
			"\t",
			"</template>",
			"",
			"<script lang='ts'>",
			"import { defineComponent } from 'vue'",
			"export default defineComponent({",
			"\tsetup () {",
			"\t\t$0",
			"\t\treturn {\n",
			" ",
			"\t\t}",
			"\t}",
			"})",
			"</script>",
			" ",
			"<style lang = \"less\" scoped>",
			"\t",
			"</style>"
		],
		"description": "自定义的一个vue代码片段"
	}
}

在vue文件里面输入vue3就会快捷生成如下代码

第二种：

{
	"demo":{
		"prefix":"v3",
		"body": [
			"<template>",
			"\t",
			"</template>",
			"",
			"<script lang='ts' setup>",
			"import {  } from 'vue'",
			"\t\t$0",
			"</script>",
			" ",
			"<style lang = \"less\" scoped>",
			"\t",
			"</style>"
		],
		"description": "自定义的一个vue代码片段"
	}
}

在vue文件里面输入vue3就会快捷生成如下代码