VS Code 内置 Emmet 但需手动开启 Tab 触发、确认语言模式为 HTML（或通过 emmet.includeLanguages 支持 vue-html 等）、用自定义 html5 片段替代老旧 ! 缩写。
VS Code 内置 Emmet，无需安装插件就能用，但默认配置和常见误操作会让它“不生效”或“只部分生效”。
为什么输入 div.container 按 Tab 没反应？
最常见原因是触发方式不对：VS Code 默认禁用 Tab 触发 Emmet（为兼容其他扩展），必须手动开启。
- 打开设置（
Ctrl+,或Cmd+,），搜索emmet.triggerExpansionOnTab - 勾选该选项，或在
settings.json中添加："emmet.triggerExpansionOnTab": true
- 确保当前文件语言模式是
HTML（右下角状态栏检查，不是Plain Text或JavaScript） - 如果在
.vue或.jsx文件中使用，需额外配置emmet.includeLanguages
如何在非 HTML 文件（如 .vue）里用 Emmet 写模板？
Emmet 不自动识别 <template> 区域，需显式声明语言上下文。
- 在
settings.json中添加："emmet.includeLanguages": { "vue-html": "html", "vue": "html" } - 保存后，光标进入
<template>标签内，输入ul>li*3再按Tab就能展开 - 注意：
vue-html是 Vue 单文件组件中模板的专用语言标识，不是html
!+Tab 生成的 HTML5 模板太旧，怎么更新？
VS Code 自带的 ! 缩写基于老旧的 Emmet 配置，不支持现代语义标签或自定义 DOCTYPE。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
!，改用自定义片段：在用户代码片段中新建html.json - 添加如下内容（支持
lang属性、UTF-8 声明、现代结构）：{ "html5": { "prefix": "html5", "body": [ "<!DOCTYPE html>", "<html lang="zh-CN">", "<head>", " <meta charset="UTF-8">", " <meta name="viewport" content="width=device-width, initial-scale=1.0">", " <title>$1</title>", "</head>", "<body>", " $2", "</body>", "</html>" ], "description": "HTML5 boilerplate" } } - 之后输入
html5+Tab即可插入新模板
Emmet 的真正门槛不在语法，而在语言模式识别和触发开关——很多人调了半小时缩写，最后发现只是右下角显示着 Plain Text。多看一眼状态栏，比查文档快十倍。
