Emmet在VSCode中默认启用，失效主因是语言模式非HTML、光标位置不当（须在缩写末尾或字母数字后）、emmet.triggerExpansionOnTab未设为true；需确保右下角显示HTML、文件已保存为.html、且不在script/style内使用。
Emmet 在 VSCode 里根本不用“开启”——它默认就开着，出问题从来不是因为关了，而是环境没对。
Tab 按了没反应？先盯住这三件事
90% 的“Emmet 不工作”都卡在这三个硬性条件上，缺一不可：
- 右下角状态栏必须显示
HTML（不是Plain Text、JavaScript或Vue）；新建未保存文件默认是纯文本，哪怕你写了div.container，按Tab也毫无反应 - 光标必须在缩写末尾或紧贴字母/数字之后，比如
ul>li*3|（|是光标），不能在<div class="|"></div>里，也不能在<script></script>块中 - 设置里
emmet.triggerExpansionOnTab必须为true；如果被插件或自定义配置设成false，Tab就只会插入制表符
HTML 缩写只在 HTML 模式下生效，别指望它跨语言自动识别
VSCode 默认只对 .html 文件和明确设为 HTML 语言模式的文档启用 Emmet。常见踩坑点：
-
.vue文件的<template>区域：需在settings.json中加"emmet.includeLanguages": {"vue-html": "html"} -
.jsx或.tsx文件：语言模式得是javascriptreact或typescriptreact，再配"emmet.includeLanguages": {"javascriptreact": "html"} -
.md或.txt文件：即使内容全是 HTML，Emmet 也不会启动；想用就得手动切语言模式或改后缀
CSS 缩写 m10 为什么不出 margin: 10px;
CSS Emmet 不补全选择器，只补全属性值，而且有严格位置要求：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须在
.css文件或<style>块中，且语言模式为CSS（不是Vue或Less） - 光标必须落在冒号
:后、分号;前，比如margin: |，然后输m10再按Tab -
m10默认输出margin: 10px;，但新版 VSCode 已禁用通用前缀，mt10才是margin-top: 10px;；w100p对应width: 100%;，w100是width: 100px;
! 按 Tab 生成 HTML5 骨架，但只在空行有效
! 是唯一不带字母的 HTML 缩写，但它极其挑剔：
- 必须在完全空白的首行输入，不能前面有空格，也不能写在
<div>里面 - 按
Tab后生成<html lang="en"><head>...</head><body></body></html>，中文项目记得手动把lang="en"改成lang="zh-CN" -
html:5和html5已废弃，VSCode 当前版本完全不识别，别白费劲
最常被忽略的其实是语言模式切换和 emmet.includeLanguages 的映射关系——它不是“让 Emmet 更强”，而是“告诉 VSCode 这段代码该用哪套规则解析”。配错一个 key，比如把 vue-html 写成 vue，缩写就彻底静音。
