.jpg)
vscode中怎么使用.vue代碼模板？下面本篇文章給大家介紹一下vscode中配置并使用.vue代碼模板的方法，希望對大家有所幫助！
vscode里使用.vue代碼模板
1.設(shè)置.vue模板
打開編輯器，點(diǎn)擊文件 —— 首選項(xiàng) —— 用戶代碼片段，會彈出來一個輸入框。【推薦學(xué)習(xí)：《vscode》】
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
在輸入框輸入vue，回車，會打開一個vue.json文件。
在里面復(fù)制以下代碼：
{ "Print?to?console":?{ "prefix":?"vue", "body":?[ "<!--", "* @Component: ", "* @Maintainer: ", "* @Description: ", "-->", "<template>", "??<div>n", "??</div>", "</template>n", "<script>", "export default {", " name: {n", " },", " data() {", " return {n", " }", " },", " mounted(){n", " },", " methods: {n", " },", " components: {n", " }", "}", "</script>n", "<style>n", "</style>", "$2" ], "description":?"Log?output?to?console" } ??}
模板內(nèi)容可按自己的喜好自行修改。
然后新建一個.vue文件，輸入vue然后按tab鍵。
2.如果第一步?jīng)]有成功
如果第一步成功是最好的，萬一按tab鍵沒有成功生成模板，而是多了一個空格：
步驟一：點(diǎn)擊文件 —— 首選項(xiàng) —— 設(shè)置，修改以下設(shè)置：
"emmet.syntaxProfiles":?{ ????"vue-html":?"html", ????"vue":?"html" }, "emmet.triggerExpansionOnTab":?true
步驟二：點(diǎn)擊編輯器右下角笑臉左邊的文件類型，選擇配置文件關(guān)聯(lián)，輸入vue然后回車。右下角的文件類型就會從html變成vue。這時(shí)再用tab鍵就可以成功生成模板了~
更多編程相關(guān)知識，請?jiān)L問：vscode！！
? 版權(quán)聲明
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載。
THE END
喜歡就支持一下吧
相關(guān)推薦
.png)
