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的配置方法的全部過程了。