配置vscode快速输出模板

脱了壳的小乌龟

已于 2022-08-17 16:19:50 修改

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue

于 2020-04-24 10:59:30 首次发布

本文链接：https://blog.csdn.net/lyx1838102537/article/details/105725912

本文介绍如何在VSCode中配置用户片段，实现输入特定前缀后快速生成Vue文件的标准模板，提高前端开发效率。

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

**配置vscode快速输出模板*

1、文件——首选项——用户片段——vue.json
2、输入如下代码片段

{
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<template>",
			"<div></div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  // import引入的组件",
			"  components: {},",
			"  data() {",
			"    return {}",
			"  },",
			"  //  方法集合",
			"  methods: {},",
			"  // 生命周期-挂载完成（可以访问DOM元素）",
			"  mounted() {}",
			"}",
			"</script>",
			"<style scoped>",
			"</style>",
			""
		],
	}
}

3、重新新建vue文件，直接输入"vue"，回车
4、会直接生成以下模板
在这里插入图片描述
***可以根据自己的代码风格设置自己想要的模式！！！