vue进阶：vs code添加vue代码片段

• 如何设置？
• 选择或创建
• 配置代码
• 如何使用？

一、如何设置？

进入vs code主界面-->使用快捷键“ctrl + shift + p”:

如果你是使用Preferences:Configure User Snippets或者之前的记录被清除的话，这个选项不会出现在第一行，这时候你可以在搜索栏输入：Configure User Snippets，然后就可以找到这个选项了。

二、选择或创建vue.json

进入Configure User Snippets后会看到下面这个界面：

根上面的情况一样，第一次进入不会出现在第一行，这时候在搜索栏输入：vue.json，然后点击进入编辑，这个环节是如果原来有vue.json文件的话就会打开原来的文件，如果没有的话点击“vue.json”就会创建这个文件并进入到编辑界面：

三、配置代码

 "Print to console": {
         "prefix": "vue:5",
         "body": [
           "<template>",
           "",
           "",
           "</template>",
           "",
           "<script>",
           "export default {",
           "",
           "}",
           "</script>",
           "",
           "<style scoped>",
           "",
           "</style>"
           ],
         "description": "Log output to console"
     }

四、如何使用？

在vue文件中输入：vue:5 ，然后按下Tab键就可以自动生成vue文件的代码结构了。

生成的代码结构长这样：

 <template>

 </template>

 <script>
 export default {

 }
 </script>

 <style scoped>

 </style>

以上就是vue代码片段的vs code的配置方法的全部过程了。