VS Code中添加全局用户代码片段

一、前言

在使用VS Code的过程中，有时候我们希望将一些通用性、重复性的代码设置成模板，每当我们键入快捷访问字符，就会生成相应的代码片段，从而大大提高开发效率；

本文以在VS Code中添加vue3中组件模板为例，说明如何在VS Code中添加自定义的全局用户代码片段；

二、新建全局代码片段

1、【设置】==> 【用户代码片段】

2、新建全局代码片段

我们选择【新建全局代码片段】，这样在每个项目中均可以使用；

根据提示输入【文件名】；

注意：这个文件名就是我们后续用来调取代码片段的快捷指令；

我们新增的是vue3组件的模板语法，可以起名为：vue3，再根据提示按【回车】；

在这里我们就可以添加准备好的代码片段了，注意这里使用的是json格式文化；

3、添加代码片段

 将下述代码直接复制进去保存即可；

{
	"vue3": {
        "prefix": "vue3",
        "body": [
            "<template>",
            "  <div class=\"container\">",
            "",
            "  </div>",
            "</template>",
            "<script setup>",
			"import {ref,reactive} from \"vue\"",
            "",            
            "</script>",
            "<style lang=\"scss\" scoped>",
            "",
            "</style>",
            ""
        ],
        "description": "vue3组件模板"
    }
}

 上述代码只是一个简单的模板，想要更复杂的内容，在body中自行添加即可；

三、如何使用

在编辑器中输入【vue3】，就可以看到系统提示输入的代码片段；

按回车，编辑器中就会生成我们指定的模板代码；

很简单的一个小操作，快来试试吧~