在vscode中添加vue模板

在vscode中使用快捷键添加vue模板

vscode中使用vue框架时,每次新建的vue文件都需要把输入一些相同的代码,在这里,我们可以使用输入vue+enter快速生成vue模板。

一、配置vue.json文件

点击左上角"文件(file)",选择“首选项(Preferences)”,点击"用户代码片段(User snippets)",在搜索框输入vue.json。

打开vue.json文件之后,在{}里添加以下内容。

代码如下(示例):

"Print to console": {
	"prefix": "vue",
	"body": [
		"<template>",
		"  <div></div>",
		"</template>",
		"",
		"<script>",
		"export default {",
		"  name: '',",
		"  data() {",
		"    return {",
		"    };",
		"  },",
		"  methods: {",
		"},",
		"  mounted(){",
		"},",
		"};",
		"</script>",
		"",
		"<style scoped>",
		"",
		"</style>",
		"",
	],
	"description": "Log output to console"
}

保存之后,则可使用vue+enter生成vue模板了。

二、vsCode修改为vue语言

如果以上步骤设置好还未能实现,有可能是未替换成vue语言。
图片如下(示例):
在这里插入图片描述


版权声明:本文为weixin_42100978原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。