VSCode设置用户自定义代码片段（给代码片段设置成快捷键）快捷代码设置方法

况几

已于 2022-09-29 14:21:44 修改

阅读量3.8k

点赞数 1

分类专栏： web前端文章标签： vscode ide 编辑器

于 2022-09-29 14:16:21 首次发布

本文链接：https://blog.youkuaiyun.com/angrynouse/article/details/127105664

版权

web前端专栏收录该内容

56 篇文章

订阅专栏

本文介绍了如何在VSCode中设置用户自定义代码片段，并为这些片段分配快捷键。通过‘文件-首选项-配置用户代码片段’路径创建新代码片段，输入快捷键名称并保存配置文件，最后在指定位置写入代码即可使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 按图操作“文件-首选项-配置用户代码片段”

在这里插入图片描述

2. 点击 “新代码片段”

在这里插入图片描述

3. 输入快捷键名称，敲回车

在这里插入图片描述

4. 自动生成了一个配置文件

在这里插入图片描述

5. 配置文件中写代码

代码一定要放到第4步生成的文件夹中的图示所标注的位置，配置完成后要保存
在这里插入图片描述
可复制的代码：

	"v":{
		"prefix": "v",
		"body":[
			"// 这条要放在</head>标签前引用",
			"<script src=\"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js\"></script>", 
			"<div id=\"app\">",
				"\t<div>{{message}}</div>",
			"</div>",
			"const vm = new Vue({",
					"\tel:\"#app\",",
					"\tdata:{",
						"\t\tmessage:'hello!!'",
					"\t}",
			"})",
		],
		"description": "v components" // 描述 类型 ： 快捷键    组件 
	}