输入!按Tab即可生成HTML5模板，VSCode通过Emmet实现高效编码，支持自定义片段和高级缩写，提升开发效率。
说实话，刚开始用VSCode写HTML的时候，我也觉得每次都要手动敲
、、那些东西挺麻烦的。后来才发现，VSCode在快速生成HTML基础模板结构这方面做得真是相当到位，主要就是靠Emmet和它内置的一些小技巧，能让你瞬间拥有一个干净整洁的HTML骨架。解决方案
在VSCode中快速生成HTML基础模板结构，最核心的工具就是Emmet。它几乎是前端开发的标配，内置在VSCode里，开箱即用。
你只需要在一个空的
.html文件中，输入一个感叹号
!，然后按下
Tab键（或者回车键），VSCode就会立刻为你生成一个完整的HTML5基础模板。
Document
有时候，你可能还会看到有人用
html:5然后按
Tab键，效果是一样的。这两种方式都能让你避免重复劳动，直接进入内容编写阶段。我个人觉得，这简直是提升开发效率的神器，尤其是在起步阶段，省去了不少繁琐的配置。
立即学习“前端免费学习笔记（深入）”；
VSCode中Emmet是什么，它如何帮助我快速创建HTML结构？
Emmet，简单来说，它是一套用于快速编写HTML和CSS代码的缩写语法。它并不是VSCode独有的功能，而是被集成到了很多主流的代码编辑器中，VSCode只是其中之一。它之所以能帮我们快速创建HTML结构，是因为它将一些常用的HTML标签、属性和结构模式，映射成了一系列简洁的缩写。
拿我们上面提到的
!来说，它实际上是Emmet的一个预设缩写，代表了HTML5文档的完整骨架。当你输入
!并触发Emmet时（通常是按下Tab键），Emmet会根据这个缩写，自动扩展成我们看到的那个标准的HTML5模板。
但Emmet的能力远不止于此。比如，你想创建一个带有特定class和id的div，你不需要写
，只需要输入
div.container#main，再按Tab，它就自动帮你补全了。如果你想在div里放一个无序列表，里面有三个列表项，每个列表项里再放一个链接，你可以这样写：
div>ul>li*3>a。按下Tab，你会看到一个完整的结构瞬间生成：
我第一次知道这些的时候，简直惊呆了，感觉就像发现了一个新大陆。它把原本需要好几步的操作，简化成了一次键盘敲击，大大减少了我们写代码时的思考中断和重复性输入。这不仅仅是速度上的提升，更重要的是，它让我们的注意力可以更多地集中在逻辑和内容本身，而不是语法细节。
除了基础模板，Emmet还能在VSCode中实现哪些高级HTML/CSS快速编写技巧？
Emmet的高级用法，可以说覆盖了我们日常前端开发中大部分的重复性工作。除了上面提到的嵌套和重复，它还能处理属性、文本内容，甚至在CSS中也有强大的表现。
在HTML方面，你可以这样玩：
-
添加属性和文本内容：
a[href="https://example.com"]{Click me}会生成Click me
。 -
兄弟元素：
header+main+footer
会生成
。 -
隐式标签名：Emmet很聪明，如果你只输入
.item
，它默认会为你生成div
，也就是。但如果你在
ul
下面输入.item
，它就会知道你想要的是li
，生成 。这种上下文感知能力，我觉得挺人性化的。
-
自定义属性：
img[src="image.jpg" alt="Description"]
就能快速生成带有自定义属性的标签。
在CSS方面，Emmet同样强大：
-
常见属性缩写：
p10
扩展为padding: 10px;
。m-a
扩展为margin: auto;
。d:f
扩展为display: flex;
。这大大加快了样式编写的速度。 -
单位：你可以直接写
w100p
得到width: 100%;
，或者h50vh
得到height: 50vh;
。 -
多值属性：
bd+
扩展为border: 1px solid #000;
。bg+
扩展为background: #fff url() no-repeat 0 0;
。这些都是预设好的常用值，非常方便。
我个人在使用Emmet写CSS时，尤其喜欢它的缩写功能，比如写
pos:a就能得到
position: absolute;，写
fl就能得到
float: left;。这些小技巧虽然看起来不起眼，但日积月累下来，节省的时间和精力是相当可观的。它让我的代码输入变得更像是在“思考”，而不是“打字”。
如果Emmet不工作或我想自定义HTML模板，VSCode有哪些解决方案？
有时候Emmet可能会“失灵”，或者你对默认生成的HTML模板不满意，想加入一些公司或项目的特定规范。别担心，VSCode提供了灵活的解决方案。
Emmet不工作时的排查：
-
检查文件类型：确保你的文件是
.html
格式，或者VSCode将其识别为HTML语言模式。Emmet是基于语言模式工作的，如果VSCode认为你在写JavaScript文件，那Emmet的HTML缩写自然不会生效。你可以查看VSCode右下角的状态栏，确认当前的语言模式。 -
检查VSCode设置：在VSCode的设置（
Ctrl+,
或Cmd+,
）中搜索emmet.triggerCharacters
和emmet.showSuggestionsAsSnippets
。确保它们没有被禁用，或者配置不当。有时候，用户可能会不小心修改了这些设置。 - 重启VSCode：最简单的办法往往有效，重启一下VSCode，让它重新加载所有插件和配置。
- 检查扩展冲突：极少数情况下，某些第三方扩展可能会与Emmet产生冲突。你可以尝试禁用最近安装的扩展，看看问题是否解决。
自定义HTML模板（User Snippets）： 如果默认的Emmet模板或者你想要的模板结构比较特殊，Emmet无法直接生成，那么VSCode的“用户代码片段”（User Snippets）功能就派上用场了。这允许你创建自己的代码模板，并通过自定义的快捷方式触发。
创建自定义HTML模板的步骤：
- 在VSCode中，点击菜单栏的
文件(File)
->首选项(Preferences)
->配置用户代码片段(Configure User Snippets)
。 - 选择
html.json
（如果你想为所有HTML文件创建片段）或者新建全局代码片段文件...
（如果你想创建一个可以在任何语言模式下使用的片段）。我们这里选择html.json
。 html.json
文件会打开。这是一个JSON格式的文件，你可以在其中定义你的代码片段。
这是一个简单的自定义HTML5模板片段示例：
{
"HTML5 Custom Template": {
"prefix": "myhtml",
"body": [
"",
"",
"",
" ",
" ",
" ",
" ${1:页面标题} ",
" ",
"",
"",
" ",
" ${2:网站Logo}
",
" ",
" ",
" ",
" ${3}",
" ",
" ",
" ",
"",
""
],
"description": "自定义的HTML5基础模板，包含head、body、header、main、footer和外部CSS/JS引用。"
}
}"HTML5 Custom Template"
：这是这个代码片段的名称，它会显示在VSCode的建议列表中。"prefix": "myhtml"
：这是你用来触发这个代码片段的缩写。当你输入myhtml
并按下Tab时，就会生成这段代码。"body"
：这是一个字符串数组，每一项代表生成代码的一行。$1
,$2
等是光标占位符，生成代码后，光标会依次跳转到这些位置，方便你快速填写内容。$CURRENT_YEAR
是一个预定义的变量，会自动替换为当前年份。"description"
：对这个代码片段的简短描述。
保存
html.json文件后，回到你的HTML文件，输入
myhtml并按下Tab，你就会看到你自定义的模板结构被生成了。我发现这种自定义方式非常强大，它能让你的开发环境真正适配你的工作流和项目规范，减少了每次新项目启动时的一些重复性设置。
