vscode 修改默认html模板

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' ，定位到模板语法位置，大概内容是这样：

"!!!":"{}",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中：

这是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, 最终的效果：