vscode 修改默认html模板
2022-06-28 本文已影响0人
O无为学长O
VsCode 可以通过 ! + tab 方式快速生成html结构，这是大家都知道的事情。
我习惯使用 live server 插件来做前端页面的服务器环境测试，但一个比较让人讨厌的地方在于，在服务器环境下，浏览器总是会自动请求 favicon.ico 文件，加载失败还会在控制台输出 404 错误提示。
在忍了一段时间之后终于还是忍不住了，于是百度了一下修改默认模板的方法，记录下来，方便以后查阅。
注意： vscode 版本不同，要修改的文件有所不同，但大概的方向是一致的。
较老一些版本的修改路径
通过以下路径找到模板文件：
{VScode安装路径}\resources\app\extensions\emmet\node_modules\vscode-emmet-helper\out\expand\expand-full.js
打开 expand-full.js 文件，查找 '!' 或者 'doc' ，定位到模板语法位置，大概内容是这样：
"!!!":"{<!DOCTYPE html>}",doc:"html[lang=${lang}]>(head>meta[charset=${charset}]+meta[http-equiv='X-UA-Compatible'][content='IE=edge']+meta:vp
注意这只是片段，前后还有其他代码。
doc: 后面就是html结构模板了，要添加或者删除什么，只需要遵守 emmet 语法即可。
建议先备份一下，再修改。
修改之后要关闭模板文件和vscode，再重新打开vscode 才会生效。
较新版本的修改路径
通过以下路径找到模板文件：
{VScode安装路径}\resources\app\extensions\emmet\dist\node\emmetNodeMain.js
打开 emmetNodeMain.js 文件。
接下来的步骤与上面是相同的。
如果你的版本与上面的两种方式的路径都不相同，可以自己尝试查找名称中有 emmet 的文件夹，基本上模板就在这个文件夹中了。
解决请求 favicon.ico 失败的 404 错误的方法是添加以下标签内容到模板的head中：
<link rel="icon" href="data:image/ico;base64,=">
这是html文件中的修改方式，如果要修改 vscode 模板，按照上面说的找到 html 结构片段，然后在已有的 emmet 语法中新增：
link[rel='icon'][href='data:image/ico;base64,=']
我是添加在 viewport 标签下面的，新增之后的大概的代码片段是这样：
meta:vp+title{${1:Document}})+link[rel='icon'][href='data:image/ico;base64,=']+body
我还将lang的值改成了 zh-CN, 最终的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="icon" href="data:image/ico;base64,=">
<body>
</body>
</html>
