VSCode 的Emmet插件里的小心思🤔

163 阅读1分钟

“我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第1篇文章,点击查看活动详情


最近我刚开始学习网页开发,一些基础我是略懂的,所以就二倍速在看视频,然后发现老师用的Atom与我用的VSCode在使用Emmet插件生成HTML模板时有些不同

image-20220831235609628.png

上图是在Atom使用html:5自动生成的

image-20220831235904359.png

而这图是VSCode使用html:5自动生成的

VSCode明显多了两行,我想🤔会不会是因为Emmet插件版本更新了,所以与课程里老师展示的不一样

去Emmet官网探索

打开Emmet官网www.emmet.io/

一步步找到官方文档docs.emmet.io/cheat-sheet…

然后找到关于HTML的部分

image-20220901000740707.png

从官网文档来看,确实没有VSCode的那两行

猜测

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

根据这两行代码,我猜测,是微软的小心思,添加了自家浏览器Edge的适配🤪

就不想要这两行

如果你不想要这两行,可以自己手动删除,或者修改VSCode 内置的Emmet插件模板,这样就不用每次都自己修改。

VSCode Emmet插件位置(macOS)

我用的是macOS系统,所以用Windows的小伙伴,你们要自己去互联网找到Emmet插件模板的位置了。

/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/extensions/emmet/dist/node/emmetNodeMain.js

操作之前先备份emmetNodeMain.js文件,如果误操作还可以还原🤓

WX20220831-233803@2x.png

打开emmetNodeMain.js文件,搜索关键字meta:vp+

meta[http-equiv='X-UA-Compatible'][content='IE=edge']+meta:vp+这段删除后保存,然后重启VSCode,让其重新加载修改后的emmetNodeMain.js文件

注意加号(+)连接符,删除多了会出问题🤣上图就是框选多了一个加号