修改VSCODE默认模板（live template）,可以新增项（Emmet语法）
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>
参考资料:
6. 最最关键的来了！！！如何修改甚至增加按 "!" 默认生成的模板
据我观察，网上的资料均只是告诉你取修改variable中或者meta的内容，并没有告诉你自己怎么创建，或者修改 !等快捷键默认生成的模板，这里我会一一介绍
就比如像相对于上面的代码，（这里我使用VSCODE插件Prettier自动的格式化，看起来舒服很多，如果你的文件时都挤在一块，可以尝试格式化一下，不影响使用）
我增加了一项
修改了一项
如何实现？
6.1 新增meta项
先搜索meta: ,找到配置项一列
观察到了我需要的是 meta:edge, 而我自己补充一个："meta:ren": "meta[name=renderer content='webkit']",
6.2 修改"!"默认生成
搜索 !!!, 找到对应项（注意搜索!!!只是方便定位，我们要找的是doc那一项）
注意我修改的两项：
保存重启，启动！！！
7.修改光标停留位置
由于我其实并不需要修改IE=XXX的值，所以希望光标直接跳过这个，做了一下修改
"meta:edge": "meta:compat[content='IE=edge']",
(注意: 这里content='IE=edge',=左右不能有空格！！！ IE=edge必须要用''括起来(这里的''最后会翻译成"")，不然最后形成的是 content = "" IE =edge)
参考链接：
