VsCode常用設定（新手必備！）

很多同學會有疑問，為什麼我看到很多大牛的影片裡面敲程式碼的時候，輸入一個template，就會出現一大塊程式碼。

為什麼我輸入一個template，只有這一個單詞，啥也沒出來

別墨跡，快解決

閒話不多說，我們就來聊一聊如何--懶省事（在VsCode裡面設定自定義的模板）

首先：我們要找到這個模板設定的入口

在檔案 - > 首選項 - > 使用者程式碼片段

選中以後，會出現下面這個輸入框，假如你想設定.vue檔案的模板，可以新建一個vue.json全域性程式碼片段檔案，輸入vue.json然後回車。

好了，接下來你可以把那些沒必要的註釋刪掉，只需要在這個json檔案裡面輸入以下內容

好吧，解釋一下

這裡的prefix是你在編輯器裡輸入的內容，就好像建立html檔案的時候，輸入的英文感嘆號

body就是你回車以後出現的內容

注意，這裡的body是一個陣列，每一行的內容都是陣列裡的每一項，並且需要用引號引起來。

是不是跟著敲好了？

接下來，儲存之後，就可以回到我們的.vue檔案裡面嘗試一下

當然如果你覺得這還不夠，我們依舊可以在那個json檔案裡面繼續輸入

接下來你就可以輸入”js”，就能出現下面body裡面的程式碼。

太棒了，我們已經知道了如何建立一個小的片段

那麼我們為何不一步到位，直接建立一個完整的vue檔案模板呢？

接下來好心的我吧程式碼貼出來，直接拿去用吧！！！

{

 
"vue-template": {

 
"prefix": 
"vue",

 
"body": [

 
"<template>",

 
"   <div></div>",

 
"</template>",

 
"",

 
"<script>",

 
"export default {",

 
" data() {",

 
" return {};",

 
" },",

 
"",

 
" components: {},",

 
"",

 
" computed:{},",

 
"",

 
" mounted () {},",

 
"",

 
" methods: {},",

 
"}",

 
"</script>",

 
"",

 
"<style scoped>",

 
"",

 
"</style>",

 ]

 }

}

最後輸入”vue”，就能直接出現這個程式碼模板了

這個功能不只是可以設定模板，我們還能把偷懶發揮到極致——

比方說：你在寫標籤的時候，一些新增的語義化標籤的程式碼提示並不完整，嘿嘿嘿......推到

比方說：<figcaption> 記不住，可以去html的模板裡給他設定成” fi”，嘿嘿嘿.....繼續推到

比方說：我們常用的方法console.log() ，就改成`log`吧，嘿嘿嘿......統統推到

程式碼誰能比我寫的快？還有誰？？？