vscode中,感叹号以及感叹号+Tab键无法生成html骨架的解决方法

本文介绍了在VSCode中遇到'!'无法生成HTML骨架的问题及其解决方法。包括通过设置自定义代码片段、调整Emmet扩展设置以及通过Emmet Abbreviation设置来实现快捷生成HTML模板。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vscode中,感叹号 !+ 回车 无法生成html骨架的解决方法:

方法1. 文件——>首选项——>配置代码片段——>新增代码片段——>输入html1(若已存在则输入html2,或html3,喜欢写几就写几),出现如下文件:

在这里插入图片描述

用以下这段代码替换掉绿色的内容即可:

{
	"h5 sample": {
		"prefix": "!",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"zh-CN\">\n",
			"<head>",
			"\t<meta charset=\"UTF-8\">",
			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios\">",
			"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"\t<title>Document</title>",
			"\t<link rel=\"stylesheet\" href=\"$1\">",
			"\t<script src=\"$2\"></script>",
			"</head>\n",
			"<body>\n$3",
			"</body>\n",
			"</html>"
		],
		"description": "The full sample code - html5."
	}
}

在这里插入图片描述
解释一下原因:“prefix": "!”,表示你想要用哪个快捷键来生成html骨架,之所以英文感叹号无法生成html,就是因为Vscode刚刚更新,emment这个扩展可能取消了用感叹号“!”自动生成html模板的功能,也默认关闭了按**!+Tab**自动生成html模板的功能。(具体为什么无法识别,本宝宝表示也不知道,嘿嘿)

"prefix": "!",  // 生成html骨架的快捷键

那么肯定会有好奇宝宝会问,我不想用感叹号,我能不能自己设置其他字母呢?当然可以!比如你女朋友叫刘美丽,你想用字母 l 来作为你生成html骨架的快捷键,我们来尝试一下:

{
	"h5 sample": {
		"prefix": "l", // 快捷键设置为英文字母l
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"zh-CN\">\n",
			"<head>",
			"\t<meta charset=\"UTF-8\">",
			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios\">",
			"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"\t<title>Document</title>",
			"\t<link rel=\"stylesheet\" href=\"$1\">",
			"\t<script src=\"$2\"></script>",
			"</head>\n",
			"<body>\n$3",
			"</body>\n",
			"</html>"
		],
		"description": "The full sample code - html5."
	}
}

输入字母l,出现以下提示:
在这里插入图片描述
回车键潇洒一敲,perfect!!!
在这里插入图片描述

方法2:设置——搜索emmet——找到:“Trigger Expansion On Tab” 打开就好了。然后就能用感叹号 !+tab自动生成html模板,记得实践一下哦!

在这里插入图片描述

方法3:设置——搜索emmet Abbreviation,像下图一样设置就ok,然后在html文件中直接输入html,然后会提示html:5,选择这个回车也就可以自动生成html模板了~

在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值