Visual Studio Code 創建自己的代碼片

開始學canvas,每次都寫會很麻煩,我要創建一個canvas畫布的模板代碼。

1.文件 => 首選項 => 用戶代碼片段

2.選擇你需要新建的代碼片段的語言,

如果是CSS片段就選css.json,HTML片段就選html.json以此類推。

我選的是新建一個

3.進入代碼片段編輯界面

1. 所有的代碼片段需要用""或''包裹
2. \\t表示製表符
3. 空的一行必須用''或""包裹
4. $1代表光標第一次出現的位置,$2代表按下tab後光標第二次出現的位置
5、prefix 是該片段的名字
6、description 是該片段的描述

4、創建自己的模板

{
	"creat a canvas template": {
		"scope": "javascript,html",
		"prefix": "canvas", //片段名字
        //片段代碼都在body裏
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"",
			"<head>",
				"\t<meta charset=\"UTF-8\">",
				"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
				"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
				"\t<title>Document</title>",
				"\t<style>",
					"\t\t#box {",
						"\t\t\tborder: 1px solid red;",
						"\t\t\tmargin-left: 100px;",
					"\t\t}",
				"\t</style>",
			"</head>",
			"",
			"<body>",
				"\t<canvas id=\"box\" width=\"700\" height=\"600\"> </canvas>",
				"",
				"\t<script>",
					"\t\tvar tag = document.getElementById(\"box\")",
					"\t\tvar ctx = tag.getContext(\"2d\");",
					"\t\t$1",
				"\t</script>",
			"</body>",
			"</html>",
			"$2"
		],
		"description": "創建一個canvas練習模板" //該片段的描述
	}
}

5、使用

在編輯器裏輸入自己的代碼片段的名字就會有提示出來

參考: 官方文檔

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章