一、前言
在使用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】,就可以看到系统提示输入的代码片段;
按回车,编辑器中就会生成我们指定的模板代码;
================================================================
很简单的一个小操作,快来试试吧~