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

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

{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模板时，光标默认是选中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= ${1:device-width}, initial-scale=$ {2:1.0}']"，删除${1:及}即可解除初始光标对device-width的文本选中状态
同理，删除${2:及}即可解除初始光标对1.0的文本选中状态
使用VSC打开，代码所在行数大概在4986

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

英文状态下的!(感叹号)可触发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文件中进行。

最后编辑于：2018.09.24 03:04:06