vscode中怎么使用.vue代碼模板？下面本篇文章給大家介紹一下vscode中配置并使用.vue代碼模板的方法，希望對大家有所幫助！

vscode里使用.vue代碼模板

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

打開編輯器，點(diǎn)擊文件 —— 首選項(xiàng) —— 用戶代碼片段，會(huì)彈出來一個(gè)輸入框。【推薦學(xué)習(xí)：《vscode教程》】

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

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

{ "Print to console": { "prefix": "vue", "body": [ "<!--", "* @Component: ", "* @Maintainer: ", "* @Description: ", "-->", "<template>", "  <div class="container">n", "  </div>", "</template>n", "<script>", "export default {", "  name: {n", "  },", "  data() {", "    return {n", "    }", "  },", "  mounted(){n", "  },", "  methods: {n", "  },",  "  components: {n", "  }", "}", "</script>n", "<style scoped lang="scss">n", "</style>", "$2" ], "description": "Log output to console" }   }

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

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

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

如果第一步成功是最好的，萬一按tab鍵沒有成功生成模板，而是多了一個(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鍵就可以成功生成模板了~