VS Code如何操作用户自定义代码片段（vue为例）

VS Code如何操作用户自定义代码片段VS Code自定义代码片段的4个步骤1.在VS Code中找到用户代码片段2.选择对应代码片段文件 html3.输入自定义的快捷代码和相应的模板片段代码4.在.html后缀的文件中输入快捷代码并回车VS Code自定义代码片段的4个步骤你好！VS Code是一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用

Sheldon一蓑烟雨任平生

3502人浏览 · 2020-05-16 19:24:37

Sheldon一蓑烟雨任平生 · 2020-05-16 19:24:37 发布

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

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

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

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

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}$/, //不连续的两位字母// /^