【VSCode】新建vue模板太重复太麻烦？试试在VSCode设置添加用户自定义的代码片段（附本人测试通过的vue代码片段，拷贝上手直接可用）

本文链接：https://blog.csdn.net/qq_41562897/article/details/131474079

【VSCode】新建vue模板太重复太麻烦？试试在VSCode设置添加用户自定义的代码片段（附本人测试通过的vue代码片段，拷贝上手直接可用）

不卖关子了，开门见山，先贴上vue代码片段（拷贝上手直接可用）：

{
	"v": {
		"prefix": "vuehtml", //前缀命令快捷输入提示
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"",
			"<head>",
			"\t<meta charset=\"UTF-8\">",
			"\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"\t<title>vue模板页</title>",
			"</head>",
			"",
			"<body>",
			"\t<div id=\"app\">",
			"\t\t<h1>{{hello}}</h1>",
			"\t</div>",
			"\t<script src=\"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js\"></script>",
			"\t<script>",
			"\t\tconst app = new Vue({",
			"\t\t\tel: \"#app\",",
			"\t\t\tdata: {",
			"\t\t\t\thello:\"helloVUE\"",
			"\t\t\t},",
			"\t\t\tmethods: {",
			"",
			"\t\t\t}",
			"\t\t})",
			"\t</script>",
			"</body>",
			"</html>"
		],
		"description": "vuehtml components" // 描述类型：快捷键组件 
	}
}

在新建的html输入：vuehtml，回车，效果如图：
vscode自定义代码片段使用效果
好了，这个效果是怎么设置的呢？咱接着往下看。

文件==》首选项==》配置用户代码片段==》选择 “新建全局代码片段文件” 接着输入v或其他字母命名该设置文件，然后回车，贴入上面写的vue代码片段，保存。

vscode自定义代码片段

使用方法：在新建的html空白页面里输入：vuehtml回车即可。

OK，就是如此简单。

附：粉丝福利：我们在新建一个常用的vue模板页，先来看效果：
在这里插入图片描述
贴上上面的vue模板页代码片段（拷贝上手直接可用）：

{
	"v2": {
		"prefix": "vueinit", //前缀命令快捷输入提示
		"body": [
			"<template lang=\"\">",
			"\t<div>",
			"",
			"\t</div>",
			"</template>",
			"<script>",
			"export default {",
			"",
			"}",
			"</script>",
			"<style lang=\"\">",
			"",
			"</style>",
		],
		"description": "vueinit components" // 描述类型：快捷键组件 
	}
}