时间：2023-07-12 10:43:16 点击次数：12
VScode新建html文件后,使用!+tab会自动生成一个html模板
但是由于默认模板不满足我们的要求,所以每次都要修改lang和mate: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这一路径和文件
通过测试我发现了通过以下路径也可以达到目的:
通过\Microsoft VS Code\resources\app\extensions\emmet\dist\node\emmetNodeMain.js
可以找到文件emmetNodeMain.js
如图:
郑重提醒，修改之前请务必备份之，以防不测。
*** 查找 功能(默认快捷键 Ctrl+F ) ***
查找variables:{lang:，
将lang:"en"修改为lang:"zh-CN"；
如图:
此操作会将将默认生成的
<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}]"
结果如图:
默认情况下，使用！感叹号生成H5模板时，光标默认是选中device-width文本状态，需要3-4个Tab键才能将光标移入body中。
搜索关键字device-width即可找到如下代码："meta[name=viewport content=width=${1:device-width}, initial-scale=${2:1.0}]"，删除${1:及}即可解除初始光标对device-width的文本选中状态同理，删除${2:及}即可解除初始光标对1.0的文本选中状态结果如图"meta:vp":"meta[name=viewport content=width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no]"
其他亦同理title{${1:Document}}，其中title即为H5模板的页面标题，$应该是类似于变量的引用，1:还是意味着初始时光标在标题行的第1次选中Document文本状态，后者也就是模板页面的标题，完全可以修改成自己想要字符，如 XXX注意:更新 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
