15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > VS Code修改html默认模板代码(Win10)

VS Code修改html默认模板代码(Win10)

时间:2023-06-10 11:09:01 | 来源:网站运营

时间:2023-06-10 11:09:01 来源:网站运营

VS Code修改html默认模板代码(Win10):VScode新建html文件后,使用'!+tab'会自动生成一个html模板

但是由于默认模板不满足我们的要求,所以每次都要修改langmate:vp,十分麻烦

通过修改文件内容可以实现修改每次默认生成的html代码段

方法如下:

目前网上大多数教程都是通过以下目录

{VScode安装路径}/resources/app/extensions/emmet/node_modules/vscode-emmet-helper/out/expand/expand-full.js

找到expand-full.js文件

进而进行修改

然而,在本人尝试该方法时发现,emmet目录下并没有node_modules/vscode-emmet-helper/out/expand/expand-full.js这一路径和文件

通过测试我发现了通过以下路径也可以达到目的:

1.找到文件emmetNodeMain.js

通过/Microsoft VS Code/resources/app/extensions/emmet/dist/node/emmetNodeMain.js

可以找到文件emmetNodeMain.js

如图:







2. 使用VScode或其他编辑器将其打开




3. 开始修改

郑重提醒,修改之前请务必备份之,以防不测。

*** 查找 功能(默认快捷键 Ctrl+F ) ***


3.1 修改lang为zh-CN

查找variables:{lang:

lang:"en"修改为lang:"zh-CN"

如图:










3.2 修改meta:vp(viewport)

此操作会将将默认生成的

<meta name="viewport" content="width=device-width, initial-scale=1.0">

修改为

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">




同上一步操作

查找"meta:vp" (注意引号也要复制)



"meta:vp":"meta[name=viewport content='width=${1:device-width}, initial-scale=${2:1.0}']"

整体替换为下列代码(注意符号)

"meta:vp":"meta[name=viewport content='width=${1:device-width}, initial-scale=${2:1.0}, minimum-scale=${3:1.0}, maximum-scale=${4:1.0}, user-scalable=${5:no}']"

结果如图:










3.3 修改H5模板生成时光标的初始位置

默认情况下,使用!感叹号生成H5模板时,光标默认是选中device-width文本状态,需要3-4个Tab键才能将光标移入body中。








"meta:vp":"meta[name=viewport content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no']"




4.在全部修改结束后保存,关闭文件,重启VS code

新建html文件进行测试




5.实现效果




注意:更新 VScode 会丢失更改,需要重新配置










即:

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Document</title></head><body></body></html>


参考资料:

1.

作者:xishuiinsz

链接:https://www.jianshu.com/p/4effad66eccc

2.

链接:https://www.yuque.com/gangafengliu/frontend-tricks/custom-emmet-snippets







































关键词:模板,默认,修改

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭