VsCode自定义模板设置

输入一个template，就会出现一大块代码，为什么我输入一个template,只有这一个单词，啥也没出来，那么今天我们就来聊一聊如何在VsCode里面设置自定义的模板。

首先我们要找到这个模板设置的入口，在文件 - > 首选项 - > 用户代码片段

 

选中以后，会出现下面这个输入框，假如你想设置.vue文件的模板，可以输入vue.json，然后回车。

 

好了，接下来你只需要在这个json文件里面输入以下内容

这里的prefix是你输入的内容，body就是你回车以后出现的内容，注意，body是一个数组，每一行的内容都是数组里的每一项，并且需要用引号引起来。

 

保存之后，就可以回到我们的.vue文件里面尝试一下

当然如果你觉得这还不够，我们依旧可以在那个json文件里面继续输入

 

接下来你就可以输入”js”，就能出现下面body里面的代码。

 

好了，我们已经知道了如何创建一个小的片段，那么我们为何不一步到位，直接创建一个完整的vue文件模板呢，那么接下来我们就来尝试一下

 

现在我们输入”vue”，就能直接出现这么多的代码，是不是特别的方便呢？

 

当然你可能会说，我不用vue，我只是单纯地想改一下html文件的模板，那么就更加容易了，只需要在最开始的时候选择html.json，就可以设置了。

甚至这个功能不只是可以设置模板，还能为我们提供一些适当的代码提示，比方说我们在写标签的时候，一些新增的语义化标签的代码提示并不完整，比方说<figcaption> ,又长又记不住，那么你也可以去html的模板里面将他设置成”fi”,这样我们就能更加方便的书写我们的代码了。