通常,在编写代码时,在编辑器中输入一些前缀就会生成相关的联想

如输入在.html文件中输入html,就会出现以下联想,选择html:5就会生成对应的工具模板如输入HTML选择html:5的联想就会出现以下内容在这里插入图片描述
在这里插入图片描述
那么如何在vscode中自定义某个常用模板,输入特定字符就会生成事先定义好的模板呢

1.点击界面左下角的设置图标,选择“用户代码片段”
在这里插入图片描述
2.搜索并选择html.json在这里插入图片描述
3.在.json文件中添加以下内容,并保存在这里插入图片描述
附上代码:

"Print to vue": {//print to 后面的vue是模板的命名
			"prefix": "vue",//选择代码片段时将使用的前缀,即要打出的快捷键
			"body": [//模板代码
				"<div id=\"app\">",
        "\t<div>{{number}}</div>",
        "\t<input type=\"button\" value=\"+\" @click=add() >",
    		"</div>",
				"<script>",
				"\tconst app=new Vue({",
				"\t\tel:'#app',",
				"\t\tdata:{",
				"\t\t\tmessage:'hello',",
				"\t\t},",
				"\t\tmethods:{",			
				"\t\t}",
				"\t})",
				"</script>"
			],
			"description": "init vue template"//对模板的描述
		}
}在这里插入代码片

4.在.html文件中输入vue,回车,就会生成对应的自定义模板内容
在这里插入图片描述
在这里插入图片描述
注意:body:[]中的模板代码是数组中的内容,所以每一条数据(每一行代码)后都要有一个逗号,另外类似“”(引号)等特殊字符需要进行转义。

Logo

前往低代码交流专区

更多推荐