1.问题
在使用VSCDOE编写html文件时,对于使用的语言这一块,公司统一要求
但是VSCODE默认的是,这就需要我们每次都手改一下,非常麻烦,结合IDEA里面使用live template的经历
我就在思考能否修改VSCODE的相关配置文件达到同样的效果呢?
首先我找到了这个参考:如何修改vscode模板
这里要求我找到expand-full.js文件,事实上我并没有找到,所以再继续翻阅资料后,我找到了以下解决方案:
2.解决
参考链接:[VS Code修改html默认模板代码(Win10)](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
这一路径和文件
通过测试我发现了通过以下路径也可以达到目的:
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中。
搜索关键字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
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>
参考资料:
作者:xishuiinsz
链接:www.jianshu.com/p/4effad66e…
链接:www.yuque.com/gangafengli…)
标签:scale,1.0,修改,VSCODE,width,live,meta,template,模板 From: https://www.cnblogs.com/trmbh12/p/18034473