vscode设置html、vue模板

最新推荐文章于 2024-04-28 23:30:46 发布

一只一只妖

最新推荐文章于 2024-04-28 23:30:46 发布

阅读量588

点赞数 1

文章标签： vue html vscode

本文链接：https://blog.csdn.net/weixin_43222587/article/details/115222923

版权

一、文件——首选项——用户片段
在这里插入图片描述
二、html：在弹出窗口搜索html，选择html.json文件

vue：在弹出窗口搜索vue，选择vue.json文件
在这里插入图片描述

三、html.json文件中自定义设置html模板

{
	"html template": {
		"prefix": "html1", // 自定义的快捷代码
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"<head>",
				"\t<meta charset=\"UTF-8\">",
				"\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
				"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
				"\t<title>一起加油鸭</title>",
			"</head>",
			"<body>",
				"\t<script type=\"text/javascript\">",
				"\t</script>",
			"</body>",
			"</html>"
		],
		"description": "HTML5"
	}
}

vue.json文件中自定义设置vue模板

{
	"vue template": {
		"prefix": "vue1", // 自定义的快捷代码
		"body": [
			"<template>",
  			"\t<div></div>",
			"</template>",
			"<script lang=\"ts\">",
			"import { defineComponent } from 'vue'",
			"export default defineComponent({",
  			"\tname: 'App'",
			"})",
			"</script>"
		],
		"description": "VUE"
	}
}

四、在html文件中输入自定义快捷键
在这里插入图片描述

在vue文件中输入自定义快捷键
在这里插入图片描述

一只一只妖

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vscode设置html、vue模板

一、文件——首选项——用户片段二、html：在弹出窗口搜索html，选择html.json文件vue：在弹出窗口搜索vue，选择vue.json文件三、html.json文件中自定义设置html模板{ "html template": { "prefix": "html1", // 自定义的快捷代码 "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "<head>", "\
复制链接

扫一扫