vscode 自定义vue代码字段

最新推荐文章于 2025-06-09 18:37:32 发布

原创最新推荐文章于 2025-06-09 18:37:32 发布 · 371 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何在编辑器中配置Vue.js代码片段，通过修改vue.json文件，实现快速创建.vue页面模板，提升开发效率。

路径：文件---首选项--用户代码字段搜索vue.json 如下图所示

进入vue.json 文件会出现如下的注释代码

代码如下：

	"demo": {
		"prefix": "vhtml",
		"body": [
				"<template>",
				" <div class=\"$1\">",
				" ",
				" </div>",
				"</template>",
				" ",
				"<script>",
				"export default {",
				" name: '',",
				" data () {",
					" return {",
					
					" }",
				" }",
				"}",
				"</script>",
				" ",
				"<style scoped lang = \"less\">",
				" ",
				"</style>"
		],
		"description": "模板代码"
	}
}

新建一个.vue页面输入 vhtml 会出现如下：