Visual Studio Code 创建自己的代码片

最新推荐文章于 2024-03-05 00:23:29 发布

做一个有知识的流氓

最新推荐文章于 2024-03-05 00:23:29 发布

阅读量3.9k

点赞数 3

分类专栏： IDE及各种工具

本文链接：https://blog.csdn.net/qq_36370731/article/details/83014439

版权

IDE及各种工具专栏收录该内容

4 篇文章 0 订阅

订阅专栏

开始学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、使用

在编辑器里输入自己的代码片段的名字就会有提示出来

参考: 官方文档

做一个有知识的流氓

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Visual Studio Code 创建自己的代码片

开始学canvas,每次都写会很麻烦，我要创建一个canvas画布的模板代码。1.文件 =&gt; 首选项 =&gt; 用户代码片段2.选择你需要新建的代码片段的语言,如果是CSS片段就选css.json,HTML片段就选html.json以此类推。我选的是新建一个3.进入代码片段编辑界面1. 所有的代码片段需要用""或''包裹2. \\t表示制表符3. 空的一行...
复制链接

扫一扫