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>

复制代码