VSCode设置vue模板

最新推荐文章于 2024-04-28 23:30:46 发布

原创最新推荐文章于 2024-04-28 23:30:46 发布 · 581 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#visual studio code

vue基础知识专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何在VSCode中快速设置Vue组件模板，通过首选项中的用户代码片段功能，自定义并编辑.vue文件的代码模板，提高前端开发效率。

VSCode设置vue模板

文件 => 首选项 => user snippet
然后输入vue，选择vue-html.json
在这里插入图片描述
然后编辑模板，保存

// An highlighted block
 "Print to console": {
		"prefix": "vue",
		"body": [
			"<template>",
			"  <div>",
			"    $0",
			"  </div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  data () {",
			"    return {",
			"    }",
			"  },",
			"",
			"  components: {},",
			"",
			"  methods: {}",
			"}",
			"</script>",
			"",
			"<style scoped>",
			"</style>"
		],
		"description": "Log output to console"
	}