修改VS Code(即emmet语法)自动生成的HTML模板

修改VS Code(即emmet语法)自动生成的HTML5模板

• 在对emmet配置文件修改前，请务必备份，以防万一；
• 修改emmet配件文件需要关闭VSCode并重新打开方可生效。
• 以下操作均在win7+VSCode 1.27.2下验证通过；
• 操作系统版本或软件版本不一样，修改结果有可能不一样。

---

将H5模板的lang属性值修改成zh-CN

1. 找到下面的文件

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

2. 使用notepad或VSC打开它，搜索defaultVariables，在第1个搜索结果中，即可看到关于lang: 'en'的描述，将其中的en替换成zh-CN并保存即可。

如果使用VSC打开，大概在5663行处即有defaultVariables = { lang: 'en', locale: 'en-US', charset: 'UTF-8' }的描述。

---

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

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

1. 找到下面的文件

{VSC安装路径}\resources\app\extensions\emmet\node_modules\vscode-emmet-helper\out\expand\expand-full.js，使用notepad或VSC打开

2. 搜索关键字device-width即可找到如下代码："meta[name=viewport content='width={2:1.0}']"，删除${1:及}即可解除初始光标对device-width的文本选中状态
3. 同理，删除${2:及}即可解除初始光标对1.0的文本选中状态
4. 使用VSC打开，代码所在行数大概在4986

---

VSCode下emmet生成H5模板的简单总结

1. expand-full.js文件是emmet在VSCode的全局配件文件。

再提醒一次，修改之前请务必备份之，以防不测。

2. 英文状态下的!(感叹号)可触发emmet的H5模板。
3. 使用VSC打开expand-full.js文件，定位于5100行。大概有3行代码(逗号分隔)，如下
   "!!!": "{}",
"doc": "html[lang=${lang}]>(head>meta[charset=${charset}]+meta:vp+meta:edge+title{${1:Document}})+body",
"!|html:5": "!!!+doc",
4. 第1行的代码的意思大概就是使用3个!即可自动补全
   第3行代码的意思是键1个!即可调第1行的补全功能及第2行的补全功能。
5. 重点是第2行代码，${lang}的意思应该是寻找关于lang的变量，我估计直接将常量lang="zh-CN"写死在此处是可行的。${charset}同理可证。
6. meta:vp将会调用4986行处的代码块，这个块里使用1:及2:依次控制着2个光标选中状态，建议清除1:和2:
   和包裹它们的$及对应的{}。meta:edge同埋可证。
7. title{${1:Document}}，其中title即为H5模板的页面标题，$应该是类似于变量的引用，1:还是意味着初始时光标在标题行的第1次选中Document文本状态，后者也就是模板页面的标题，完全可以修改成自己想要字符，如 黑马程序员 。

---

后续

1. 完成修改后，H5模板初始时，光标是之间，减少了不必要的干扰，lang的属性值是zh-CN，减少了某些浏览器集成语言检测的干扰，还可以将缺省的标题修改成自己的个性文字。
2. `
   
   
   
   
   
   
   
   
   

`

3. charset="UTF-8"的修改应该是在{VSCode安装路径}\resources\app\extensions\html\snippets\html.snippets.json文件中进行。