Emmet 是 VSCode 内置的高效编码工具，支持 HTML/CSS 缩写快速生成代码，如 ul>li*5 生成无序列表、m10 展开为 margin: 10px;，并可通过设置自定义触发行为与语言支持。
Emmet 是 VSCode 内置的高效编码工具，无需额外安装插件，开箱即用。它通过简短的缩写（Abbreviation）快速生成结构化 HTML 和 CSS 代码，大幅减少重复敲击。
HTML 缩写：一行写出完整结构
在 HTML 文件中输入缩写后按 Tab（或 Enter，取决于设置），即可展开为标准 HTML 片段。
- ul>li*5 → 生成含 5 个 li 的无序列表
- div.container>h1+p{Hello}+a[href=#]{Click} → 生成带类名、标题、段落和链接的嵌套结构
- img[src=logo.png alt=Logo][width=200] → 快速写出带多个属性的 img 标签
CSS 缩写：属性自动补全与值推导
在 CSS 或 style 属性中输入缩写，按 Tab 即可展开为完整声明，并智能补全常用值。
OCR 文档识别转 Markdown（WiseOCR）
下载
WiseOCR — 将 PDF 或图片文件转换为高质量 Markdown 文本，支持表格完整识别、多栏版式还原、中英文混排。适用场景：扫描件文字提取、纸质文档数字化、合同/报告/论文转文本、图片中文字提取。支持格式：PDF、JPG、JPEG、PNG、WEBP、GIF、BMP、TIFF。触发：用户上传文件并要求"帮我识别这个文件的文字"、"PDF转文字"、"图片转文本"、"帮我提取这个表格"——会调用本技能。说"用Wi
-
m10 →
margin: 10px; -
bd1s#333 →
border: 1px solid #333; -
w100p →
width: 100%;（p表示 percent） -
trf:rx45 →
transform: rotate(45deg);
自定义 Emmet 行为（可选但实用）
VSCode 默认已启用 Emmet，但你可以微调以更贴合习惯：
立即学习“前端免费学习笔记（深入）”；
- 在设置中搜索 emmet，勾选 Emmet: Trigger Expansion on Tab 确保 Tab 键生效
- 如需在 JSX/TSX 中使用，添加配置：
"emmet.includeLanguages": {"javascript": "html", "typescriptreact": "html"} - 禁用特定文件类型（如 Markdown）的 Emmet：在设置中添加
"emmet.excludeLanguages": ["markdown"]
小技巧提升效率
掌握几个快捷操作，让 Emmet 更顺手：
- 输入 ! + Tab → 快速生成 HTML5 文档骨架（
...
