修改VS Code(即emmet语法)自动生成的HTML5模板
-
在对emmet配置文件修改前，请务必备份，以防万一； - 修改emmet配件文件需要关闭VSCode并重新打开方可生效。
- 以下操作均在win7+VSCode 1.27.2下验证通过；
- 操作系统版本或软件版本不一样，修改结果有可能不一样。
将H5模板的lang属性值修改成zh-CN
- 找到下面的文件
{VSC安装路径}\resources\app\extensions\emmet\node_modules\vscode-emmet-helper\out\expand\expand-full.js
- 使用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中。
- 找到下面的文件
{VSC安装路径}\resources\app\extensions\emmet\node_modules\vscode-emmet-helper\out\expand\expand-full.js，使用notepad或VSC打开
- 搜索关键字device-width即可找到如下代码："meta[name=viewport content='width=
{2:1.0}']"，删除
${1:及}即可解除初始光标对device-width的文本选中状态 - 同理，删除
${2:及}即可解除初始光标对1.0的文本选中状态 - 使用VSC打开，代码所在行数大概在4986
VSCode下emmet生成H5模板的简单总结
- expand-full.js文件是emmet在VSCode的全局配件文件。
再提醒一次，修改之前请务必备份之，以防不测。
- 英文状态下的!(感叹号)可触发emmet的H5模板。
- 使用VSC打开expand-full.js文件，定位于5100行。大概有3行代码(逗号分隔)，如下
"!!!": "{<!DOCTYPE html>}",
"doc": "html[lang=${lang}]>(head>meta[charset=${charset}]+meta:vp+meta:edge+title{${1:Document}})+body",
"!|html:5": "!!!+doc", - 第1行的代码的意思大概就是使用3个!即可自动补全
<!DOCTYPE html>
第3行代码的意思是键1个!即可调第1行的补全功能及第2行的补全功能。 - 重点是第2行代码，
${lang}的意思应该是寻找关于lang的变量，我估计直接将常量lang="zh-CN"写死在此处是可行的。${charset}同理可证。 -
meta:vp将会调用4986行处的代码块，这个块里使用1:及2:依次控制着2个光标选中状态，建议清除1:和2:
和包裹它们的$及对应的{}。meta:edge同埋可证。 -
title{${1:Document}}，其中title即为H5模板的页面标题，$应该是类似于变量的引用，1:还是意味着初始时光标在标题行的第1次选中Document文本状态，后者也就是模板页面的标题，完全可以修改成自己想要字符，如 黑马程序员 。
后续
- 完成修改后，H5模板初始时，光标是
<body></body>之间，减少了不必要的干扰，lang的属性值是zh-CN，减少了某些浏览器集成语言检测的干扰，还可以将缺省的标题修改成自己的个性文字。 - `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>黑马培训</title>
</head>
<style>
</style>
<body>
</body>
</html>`
-
charset="UTF-8"的修改应该是在{VSCode安装路径}\resources\app\extensions\html\snippets\html.snippets.json文件中进行。
网友评论