VS code上如何实现一键生成代码片段

最近被老板关（压）照（榨），要求开始写前端项目。从来没碰过前端，也只能扛起键盘敲码了。突然发现VS CODE对于编写前端代码也是个非常好用的东西，但是每次新建一个vue界面就要敲一通的

<template>
	<div id="">
	</div>
</template>
<style>
<style>
<script>
export default {
    data(){
        return{

        }
    },
    components:{
        
    }
}
</script>

太麻烦了，决定一狠心，在vs code中定义一个局部变量，用俩字母来代替这个模板。

具体实现步骤如下：

点击下面的用户片段，跳出来如下页面：

如果是需要建一个全局的代码片段就选择第一个，除了html外，我还需要做C++或lua的开发，因此这里我只需要建一个局部的就行，选择第二个，在我的工程里面写就可以。然后输入一个需要存储的文件名字这里值得注意的是：如果你的文件是用在html中的，那么一定要命名成xxx.html，这里我用的是vue，因此我的文件是template.vue。再把下面的片段取消注释（ctrl+/)。

到这里就大功告成了，接下来去尝试一下，新建一个vue文件：

然后输入vh敲回车，代码片段就自动生成啦！！！