使用vs code创建vue代码片段

在使用vue开发项目的时候，由于组件比较多，一开始的时候都是复制粘贴，做着做着觉得挺麻烦的而且效率不高，于是就思考，每个组件的template和js这块很多都是相同的，是否可以做成一个模板然后使用呢？于是上网搜索了下，在vs code中可以通过代码片段来实现。

创建用户代码片段

文件—>首选项—>用户代码片段

然后再弹出的输入框中输入vue，然后回车(Enter)，效果如下：

image.png

在vue.json中写上代码片段,代码如下：

{
    "vue-template": {
        "prefix": "vue",
        "body": [
            "",
            "",
            "",
            "",
            ""
        ],
        "description": "my vue template"
    }
}

书写完之后，保存文件即可。

使用vue的代码片段

效果如图：

image.png

出现提示后，按下回车(Enter),然后就会出现想要的结果了。如下图：

image.png

最后：就可以更加愉快的使用vue做我们的项目开发了，效率又提升了。
ps: 因为我配置了sass，所以在代码片段中，style标签添加了 lang=scss属性。这个需要在webpack的配置文件中配置rule，便可以使用sass语法了。当然，还可以使用vs code创建其他框架或者语言的代码片段。