vscode 创建用户片段，解决失效问题

最新推荐文章于 2025-10-15 14:52:59 发布

原创最新推荐文章于 2025-10-15 14:52:59 发布 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #代码片段

工具专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Visual Studio Code(VSCode)中创建和使用用户代码片段，通过设置关键字快速生成模板代码，例如Vue3组件。步骤包括点击文件->首选项->用户片段，创建并编辑代码片段，保存后在编写代码时输入预设的prefix即可触发代码块。这种方法能有效提高开发效率。

vscode 添加用户代码片段

vscode 中可以通过自定义的关键字快速生成相应的代码片段

创建代码片段
点击：文件 -> 首选项 -> 用户片段 -> 新代码片段输入 代码片段名字
编辑代码片段
例如:

{
	"Print to console": {
		"prefix": "vue3",
		"body": [
			"<!-- $1 -->",
			"<template>",
			"<div class='$2'>$5</div>",
			"</template>",
			"",
			"<script>",
			"import { reactive } from 'vue';",
			"export default {",
			"name:'' ,",
			"props: [ ],",
			"setup(props, ctx) {",
			"",
			"return {",
			"",
			"}",
			"}",
			"}",
			"</script>",
			"<style scoped>",
			"/*@import url($3); 引入公共css类*/",
			"$4",
			"</style>"
		],
		"description": "Log output to console"
	}
}