vscode给vue3添加模板片段

最新推荐文章于 2025-06-30 11:27:12 发布

原创最新推荐文章于 2025-06-30 11:27:12 发布 · 600 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

vscode 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何在Visual Studio Code中为Vue 3项目自定义模板片段，提升开发效率。步骤包括设置提示符、编写片段内容和描述。适合快速创建组件模板的开发者。

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

vscode给vue3添加模板片段

{
	// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<!-- author: LJ -->",
			"<!-- date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND -->",
			"<!-- description: $1 -->",
			"<template>",
			"  ",
			"</template>",
			"",
			"<script>",
			"import { defineComponent } from \"vue\";",
			"export default defineComponent({",
			"  name: \"$TM_FILENAME_BASE\",",
			"  setup () {",
			"",
			"    return {",
			"    }",
			"  },",
			"",
			"})",
			"</script>",
			"",
			"<style scoped lang='less'>",
			"",
			"</style>"
		],
		"description": "vue 模板"
	}
}