使用vscode，新建.vue文件，tab自動生成vue代碼模板

第一步: 新建模板並保存

文件 --> 首選項 --> 用戶代碼片段 --> 輸入vue，選擇vue.json -->復制 第三步中的模板內容中內容保存

第二步: 添加配置，讓vscode允許自定義的代碼片段提示出來

文件 --> 首選項 --> 設置 ---> 添加這2項

// Specifies the location of snippets in the suggestion widget
"editor.snippetSuggestions": "top",
// Controls whether format on paste is on or off
"editor.formatOnPaste": true

第三步: 復制以下代碼，保存重啟vscode

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

第四步:測試是否添加成功

測試方法： 新建vue后綴文件，輸入vue，按下tab鍵，OK

缺點是：無法像sublime一樣新建一個vue文件就可以自動帶上對應的模板。

吐槽一下：webstorm中，中文輸入法兼容有問題，據傳是Microsoft .NET Framework 4.5.2以上版本的兼容問題，更換多次版本后無法修復。無奈只能換到vscode

原文地址：https://segmentfault.com/a/1190000014232556