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模板了~


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

被折叠的 条评论
为什么被折叠?



