怎样在vscode中使用Emmet加速HTML编写【教程】

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 不自动识别 区域，需显式声明语言上下文。

• 在 settings.json 中添加：

  "emmet.includeLanguages": {   "vue-html": "html",   "vue": "html" }

• 保存后，光标进入 标签内，输入 ul>li*3 再按 Tab 就能展开
• 注意：vue-html 是 Vue 单文件组件中模板的专用语言标识，不是 html

!+Tab 生成的 HTML5 模板太旧，怎么更新？

VS Code 自带的 ! 缩写基于老旧的 Emmet 配置，不支持现代语义标签或自定义 DOCTYPE。

立即学习“前端免费学习笔记（深入）”；

• 不要依赖 !，改用自定义片段：在用户代码片段中新建 html.json
• 添加如下内容（支持 lang 属性、UTF-8 声明、现代结构）：

  {   "html5": {     "prefix": "html5",     "body": [       "",       "",       "",       "  ",       "  ",       "  ",       "",       "",       "  $2",       "",       ""     ],     "description": "HTML5 boilerplate"   } }

• 之后输入 html5 + Tab 即可插入新模板

Emmet 的真正门槛不在语法，而在语言模式识别和触发开关——很多人调了半小时缩写，最后发现只是右下角显示着 Plain Text。多看一眼状态栏，比查文档快十倍。