vscode 自动生成.vue文件代码

最新推荐文章于 2025-05-04 16:02:08 发布

猿始森林

最新推荐文章于 2025-05-04 16:02:08 发布

阅读量3.2k

点赞数 4

分类专栏：开发文章标签： vscode vue vue模板自动生成vue代码

本文链接：https://blog.youkuaiyun.com/guang_s/article/details/106383686

版权

开发专栏收录该内容

14 篇文章

订阅专栏

使vue文件能够像html一样，能够自动生成.vue文件模板

1、点击左下角设置按钮，选择用户代码片段；

在这里插入图片描述

2、搜索 `vue.json`，打开该文件；

在这里插入图片描述

3、输入如下代码；

$0 是生成代码后鼠标光标所处的位置

prefix 表示生成对应预设代码的命令

{
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<template>",
			"    <div>",
			"        $0",
			"    </div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"",
			"}",
			"</script>",
			"",
			"<style>",
			"",
			"</style>"
		],
		"description": "Log output to console"
	}
}