vscode修改html默认的模板，并重新定义光标位置
修改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文件中进行。
作者：xishuiinsz
链接：https://www.jianshu.com/p/4effad66eccc
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通