【前端】vscode保存Vue的代码片段

杰肥啊

已于 2022-07-22 10:02:17 修改

阅读量478

点赞数 1

分类专栏：前端文章标签： vscode html

于 2021-09-16 10:31:34 首次发布

本文链接：https://blog.csdn.net/javaboyweng/article/details/120323869

版权

前端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

在vs code中创建代码片段

文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段

在这里插入图片描述

名称设置为： vue-html.code-snippets

{
	"vue htm": {
		"scope": "html",
		"prefix": "vuehtml",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"",
			"<head>",
			" <meta charset=\"UTF-8\">",
			" <meta name=\"viewport\" content=\"width=device-width, initialscale=1.0\">",
			" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			" <title>Document</title>",
			"</head>",
			"",
			"<body>",
			" <div id=\"app\">",
			"",
			" </div>",
			" <script src=\"https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js\"></script>",
			" <script>",
			" new Vue({",
			" el: '#app',",
			" data: {",
			" $1",
			" }",
			" })",
			" </script>",
			"</body>",
			"",
			"</html>",
		],
		"description": "my vue template in html"
	}
}

注意：制作代码片段的时候，字符串中如果包含文件中复制过来的Tab键的空格，要换成空格键的空格

在这里插入图片描述

杰肥啊

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端】vscode保存Vue的代码片段

在vs code中创建代码片段文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段名称设置为： vue-html.code-snippets{ "vue htm": { "scope": "html", "prefix": "vuehtml", "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "", "<head>", "
复制链接

扫一扫