vscode中添加html自定義模闆

通常，在編寫代碼時，在編輯器中輸入一些字首就會生成相關的聯想

如輸入在.html檔案中輸入html，就會出現以下聯想，選擇html:5就會生成對應的工具模闆

那麼如何在vscode中自定義某個常用模闆，輸入特定字元就會生成事先定義好的模闆呢

1.點選界面左下角的設定圖示，選擇“使用者代碼片段”

2.搜尋并選擇html.json

3.在.json檔案中添加以下内容，并儲存

附上代碼：

"Print to vue": {//print to 後面的vue是模闆的命名
			"prefix": "vue",//選擇代碼片段時将使用的字首,即要打出的快捷鍵
			"body": [//模闆代碼
				"<div id=\"app\">",
        "\t<div>{{number}}</div>",
        "\t<input type=\"button\" value=\"+\" @click=add() >",
    		"</div>",
				"<script>",
				"\tconst app=new Vue({",
				"\t\tel:'#app',",
				"\t\tdata:{",
				"\t\t\tmessage:'hello',",
				"\t\t},",
				"\t\tmethods:{",			
				"\t\t}",
				"\t})",
				"</script>"
			],
			"description": "init vue template"//對模闆的描述
		}
}在這裡插入代碼片
           

4.在.html檔案中輸入vue,回車，就會生成對應的自定義模闆内容

注意：body:[]中的模闆代碼是數組中的内容，是以每一條資料（每一行代碼）後都要有一個逗号，另外類似“”（引号）等特殊字元需要進行轉義。