Visual Studio code 添加多個vue代碼片斷或JavaScript方法片斷

vue代碼片斷和JavaScript片斷添加方法相似；vue代碼片斷在vue.json下添加，JavaScript方法片斷在javascript.json文件下添加（在用戶代碼片斷內搜索此文件）；以添加vue代碼片斷爲例：

一.添加vue模板代碼片斷：

1.找到VS code編輯器文件下的首選項裏面用戶代碼片斷，如圖：

2.選擇vue.json，進入此文件下建立本身的模板，以下：

在vue.json文件下，編寫模板：

{
	// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"vue1": {//vue1:模板標識一（不可重複）
        "prefix": "vue",//自定義模板名稱；
        "body": [
            "<template>",
			"\t<el-row class=\"mainTableBox\">\n",
            "\t</el-row>",
            "</template>\n",
            "<script>",
            "\texport default {",
            "\t\tdata () {",
			"\t\t\treturn {",
			"\t\t\t\trow:[],",
			"\t\t\t\tloading:false,",
			"\t\t\t\tpageIndex:1,//當前頁碼",
			"\t\t\t\ttotalCounts:1,//總頁數",
            "\t\t\t}",
            "\t\t},",
			"\t\tmounted() {",
			"\t\t\tthis.init();",
            "\t\t}",
			"\t\tmethods: {\n",
			"\t\t\tinit(){\n",
			"\t\t\t},",
			"\t\t\tadd(){\n",
			"\t\t\t},",
			"\t\t\tedit(){\n",
			"\t\t\t},",
            "\t\t}",
            "\t\tcomputed: {\n",
            "\t\t}",
            "\t\twatch: {\n",
            "\t\t}",
            "\t}",
            "</script>\n",
            "<style>\n",
            " ",
            "</style>",
        ],
        "description": "vue基礎代碼片斷"
	},
	"vue2": {//vue2：模板標識二（不可重複）
		 "prefix": "vue2",//自定義模板名稱；
		 "body": [
			     "console.log('$1');",
	 		     "$2"
		 ],
	     "description": "Log output to console"
	}
}

複製代碼

3.使用：在.vue文件下輸入vue時，按回車鍵或tab

結果以下：