在vscode里怎么使用.vue代碼模板

本文將為大家詳細介紹“在vscode里怎么使用.vue代碼模板”，內容步驟清晰詳細，細節處理妥當，而小編每天都會更新不同的知識點，希望這篇“在vscode里怎么使用.vue代碼模板”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內容如下，一起去收獲新知識吧。

vscode有什么用

Visual Studio Code 是一個運行于 OS X，Windows和 Linux 之上的，針對于編寫現代 web 和云應用的跨平臺編輯器，它為開發者們提供了對多種編程語言的內置支持，并且正如 Microsoft 在Build 大會的 keynote 中所指出的，這款編輯器也會為這些語言都提供了豐富的代碼補全和導航功能。

1.設置.vue模板

打開編輯器，點擊文件 —— 首選項 —— 用戶代碼片段，會彈出來一個輸入框。

在輸入框輸入vue，回車，會打開一個vue.json文件。

在里面復制以下代碼：

{
 "Print to console": {
   "prefix": "vue",
   "body": [
     "<template>",
     " <div class=\"container\">\n",
     " </div>",
     "</template>\n",
     "<script>",
     "export default {",
     " data() {",
     "  return {\n",
     "  }",
     " },",
     " components: {\n",
     " }",
     "}",
     "</script>\n",
     "<style scoped lang=\"scss\">\n",
     "</style>",
     "$2"
   ],
   "description": "Log output to console"
 }
}

模板內容可按自己的喜好自行修改。

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

2.如果第一步沒有成功

如果第一步成功是最好的，萬一按tab鍵沒有成功生成模板，而是多了一個空格：

步驟一：點擊文件 —— 首選項 —— 設置，修改以下設置：

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

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

如果你能讀到這里，小編希望你對“在vscode里怎么使用.vue代碼模板”這一關鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領會，如果想閱讀更多相關內容的文章，歡迎關注億速云行業資訊頻道！