VS code自定义用户代码片段

最新推荐文章于 2024-06-15 19:48:47 发布

这瓜保熟么

最新推荐文章于 2024-06-15 19:48:47 发布

阅读量2.5k

点赞数 2

分类专栏： vs code

本文链接：https://blog.csdn.net/luzhensmart/article/details/83833340

版权

vs code 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

打开VS code，“文件-首选项-用户代码片段”（file-preference-User Snippets），在下拉列表中选择html文件，此时在VS code的应用数据文件夹内自动新建了一个名为html.json的文件，我们在这个json文件中定义我们的代码片段。

html.json：自定义如下

{
	// Place your snippets for html 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:
	"html template": {
		"prefix": "vn",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"<head>",
				"<meta charset=\"UTF-8\">",
				"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
				"<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
				"<title>Document</title>",
				"\r",
				"<script src=\"./lib/vue.min.js\"></script>",
				"\r",
			"</head>",
			"\r",
			"<body>",
			"\r",
				"\t <div id=\"app\">",
			
					"\t \t <p>{{msg}}</p>",
			
				"\t </div>",
				"\r",
				"\r",
				"\t <script>",
				"\r",
					"\t\tvar vm = new Vue({",
						"\t\t\t el : '#app',",
						"\t\t\t data : {",
						"\t\t\t msg : '欢迎学习vue'",
						"\t\t\t}",
					"\t\t}) \r",
					"\r",
				"\t </script>",
				"\r",
			"</body>",
			"\r",
			"</html>"
		],
		"description": "html template"
	}
}

1：字符串间如果值里包含特殊字符需要 \ 进行转义. 如本例中的双引号
2：换行：\r或者\n
3：tab键制表符：\t

生成效果为：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<script src="./lib/vue.min.js"></script>

</head>

<body>

     <div id="app">
          <p>{{msg}}</p>
     </div>


     <script>

        var vm = new Vue({
             el : '#app',
             data : {
             msg : '欢迎学习vue'
            }
        }) 

     </script>

</body>

</html>

这瓜保熟么

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
VS code自定义用户代码片段

打开VS code，“文件-首选项-用户代码片段”（file-preference-User Snippets），在下拉列表中选择html文件，此时在VS code的应用数据文件夹内自动新建了一个名为html.json的文件，我们在这个json文件中定义我们的代码片段。html.json：自定义如下{ // Place your snippets for html here. Each...
复制链接

扫一扫

专栏目录