VSCode Vue2 Vue3 用户自定义代码片段

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

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

5 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #vue.js #前端

前端专栏收录该内容

7 篇文章

订阅专栏

文章介绍了如何在VSCode中配置用户自定义的代码片段，特别是针对Vue2和Vue3的模板。用户可以通过设置快捷键‘vv’和‘vvv’快速生成Vue2和Vue3组件的基本结构，提高开发效率。

VSCode Vue2 Vue3 用户自定义代码片段

点击文件>首选项>配置用户代码片段，在弹窗中选择vue.json，如图所示

配置用户代码片段
选择vue.json

复制代码到vue.json中，可根据需求自行调整

{
	"vue2 template": {
		"prefix": "vv",
		"body": [
			"<template>",
			" <div>\n",
			" </div>",
			"</template>\n",
			"<script>",
			" export default {",
			"   name: '$TM_FILENAME_BASE',",
			"   props: {",
			"   },",
			"   components: {\n",
			"   },",
			"   data () {",
			"     return {\n",
			"     }",
			"   },",
			"   methods: {\n",
			"   },",
			"   mounted() {\n",
			"   },",
			"   watch: {\n",
			"   },",
			"   computed: {\n",
			"   },",
			"   filters: {\n",
			"   }",
			" }",
			"</script>\n",
			"<style lang='less' scoped>\n",
			"</style>"
		],
		"description": "vue2 template"
	},
	"vue3 template": {
		"prefix": "vvv",
		"body": [
			"<template>",
			"\t<div>",
			"$1",
			"\t</div>",
			"</template>\n",
			"<script lang=\"ts\">",
			"import { defineComponent } from \"vue\" ",
			"export default defineComponent({",
			"\tname:'$TM_FILENAME_BASE'",
			"})",
			"$2",
			"</script>\n",
			"<style lang=\"less\" scoped>",
			"$3",
			"</style>"
		],
		"description": "vue3 template"
	}
}