VS Code如何操作用户自定义代码片段

VS Code自定义代码片段的4个步骤

你好！VS Code是一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。由于使用人数基数较大，那么如何高效地编写代码则是coder们经常考虑的一个问题，今天就和大家介绍一下VS Code自定义代码片段的4个步骤。

1.在VS Code中找到用户代码片段

文件（File）->首选项(Preference)->用户代码片段(User Snippets)
在这里插入图片描述

2.选择对应代码片段文件 html.json

在这里插入图片描述

3.输入自定义的快捷代码和相应的模板片段代码

以Vue代码片段为例，实现输入“vue”关键词，回车生成对应的模板片段代码，实例代码如下：

{
	"vue": {
		"prefix": "vue",//关键字
		"body": [//对应代码片段
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"",
			"<head>",
			"\t<meta charset=\"UTF-8\">",
			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"\t<title>vueApp</title>",
			"</head>",
			"",
			"<body>",
			"\t<div id=\"app\">",
			"",
			"\t</div>",
			"\t<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>",
			"\t<script>",
			"\t\tvar app = new Vue({",
			"\t\t\tel: \"#app\",",
			"\t\t\tdata: {",
			"",
			"\t\t\t},",
			"\t\t\tmethods: {",
			"",
			"\t\t\t}",
			"\t\t});",
			"\t</script>",
			"</body>",
			"",
			"</html>"
		],
		"description": "vue snippet"
	}
}

在这里插入图片描述

4.在.html后缀的文件中输入快捷代码并回车

在这里插入图片描述
在这里插入图片描述
希望这篇文章能够帮到各位读者，同时欢迎各位读者对文章评论、点赞和收藏。

# vue.js # visual studio code # 编辑器
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue