本篇內(nèi)容介紹了“vscode中如何配置并使用.vue代碼模板”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序設(shè)計(jì)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了曲陽(yáng)免費(fèi)建站歡迎大家使用！

vscode里使用.vue代碼模板

1.設(shè)置.vue模板

打開(kāi)編輯器，點(diǎn)擊文件 —— 首選項(xiàng) —— 用戶代碼片段，會(huì)彈出來(lái)一個(gè)輸入框。

在輸入框輸入vue，回車，會(huì)打開(kāi)一個(gè)vue.json文件。

在里面復(fù)制以下代碼：

{
"Print to console": {
"prefix": "vue",
"body": [
"",
"\n",
"\n",
"\n",
"",
"$2"
],
"description": "Log output to console"
}
  }

模板內(nèi)容可按自己的喜好自行修改。

然后新建一個(gè).vue文件，輸入vue然后按tab鍵。

2.如果第一步?jīng)]有成功

如果第一步成功是最好的，萬(wàn)一按tab鍵沒(méi)有成功生成模板，而是多了一個(gè)空格：

步驟一：點(diǎn)擊文件 —— 首選項(xiàng) —— 設(shè)置，修改以下設(shè)置：

"emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
},
"emmet.triggerExpansionOnTab": true

步驟二：點(diǎn)擊編輯器右下角笑臉左邊的文件類型，選擇配置文件關(guān)聯(lián)，輸入vue然后回車。右下角的文件類型就會(huì)從html變成vue。這時(shí)再用tab鍵就可以成功生成模板了~

“vscode中如何配置并使用.vue代碼模板”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！